Disabling a Function With Another Function - Vanilla JS

Question

I was wondering how I went about disabling a function, with another function. I've got a form that asks for additional coursework, but a hides the inputs if the user has not completed any extra work. I'd like to put in a failsafe, in case they remove the set of inputs and change their mind.

What I need help with is writing the failsafe function that checks: if function 1 happened, disable it.

CodePen: http://codepen.io/theodore_steiner/pen/ORzpQQ

  function hideCourseWork() { var otherEducationHistory = document.getElementById("otherEducationHistory"); otherEducationHistory.style.display = "none"; if (otherEducationHistory.style.display == "none") { var noAdditionalCourseWork = document.getElementById("noAdditionalCourseWork"); var checkNo = document.getElementById("checkNo"); var undo = document.getElementById("undoNoAdditionalCourseWork"); noAdditionalCourseWork.style.top = "-48px"; checkNo.style.top = "-65px"; undo.style.top = "-65px"; undo.style.top = "-63px"; } }; 

 <div class="input-group" id="other-education"> <p class="subtitleDirection">Please list in chronological order, any additional cources beyond the degree(s) listed above, including any Ministry of Education Courses. If you have not completed any additional course work, please indicate.</p> <div class="clearFix"></div> <label id="otherEducation">Additional Courses*</label> <div id="otherEducationHistory"> <input type="text" class="three-lines" name="otherUniversity_1" placeholder="Institution" onblur="this.placeholder='Institution'" onfocus="this.placeholder=''" /> <input type="text" class="three-lines" name="otherDegree_1" placeholder="Degree/Diploma" onblur="this.placeholder='Degree/Diploma'" /> <input type="date" class="three-lines" name="otherEducationYear_1" /> <input type="button" value="+" onclick=addOtherEducation() /> </div> <!--end of otherEducationHistory div--> <div class="clearFix"></div> </div> <!--end of other-education div--> <p id="noAdditionalCourseWork">I have not completed any additional course work.</p> <input type="radio" name="checkNo" id="checkNo" onclick="hideCourseWork()" /> <br /> <p id="undoNoAdditionalCourseWork" onclick="reAddCourseWork()">(Undo).</p> 

Answer 1

You're not being real clear about your question but perhaps this will help.

Functions are sort of the same thing as variables. They can be reassigned, (like to an empty function, for example)..

function doSomething(){
    alert("didSomething");
}

function disableDoSomething(){
    window.doSomething = function(){};
}

If you want to be able to re-enable the function later, you could do something like this...

function doSomething(){
    alert("didSomething");
}

var functionHolder;
function disableDoSomething(){
    if(!functionHolder) functionHolder = window.doSomething;
    window.doSomething = function(){};
}

function enableDoSomething(){
    window.doSomething = functionHolder;
}

Answer 2

var foo = () => { /* foo definition */ },
    bar = foo;

/* re-assign foo to a new, empty, function implementation;
   effectively "disabling" it */
foo = () => {};

/* ... code that uses function reference foo ...*/

/* re-enable foo's original behavior by assigning bar to foo */
foo = bar;

For posterity's sake (ES5):

var foo = function() { /* foo definition */ },
    bar = foo;

/* re-assign foo to a new, empty, function implementation;
   effectively "disabling" it */
foo = function(){};

/* ... code that uses function reference foo ...*/

/* re-enable foo's original behavior by assigning bar to foo */
foo = bar;