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>

Im really confused what the issue is here? Are we not just hiding and displaying HTML elements based on a radio value? — andy mccullough
– andy mccullough, Commented Oct 5, 2016 at 14:36
Yes. However, I wanted to take it one step further and learn how I could do it via functions...Just for this example as well as future knowledge. — Theodore Steiner
– Theodore Steiner, Commented Oct 5, 2016 at 14:38
Why over-engineer things though? I've never in my entire career had to 'disable' a function — andy mccullough
– andy mccullough, Commented Oct 5, 2016 at 14:41

Robert Parham · Accepted Answer · 2016-10-05 14:27:14Z

5

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;
}

answered Oct 5, 2016 at 14:27

Robert Parham

7043 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Theodore Steiner Over a year ago

Let me see if I understand you, in my example the doSomething would be the initial function. But in the disableDoSomething you've put function(){}; Is the disable code supposed to go in there? I don't understand how to go about actually disabling the function.

Robert Parham Over a year ago

just replace doSomething with your actual function. The functions that are empty are supposed to be empty. This answer is effectively the exact same answer as the one above, the only difference is the way the functions are defined. both use the same concept of assigning the function to an empty function.

Theodore Steiner Over a year ago

Makes sense. Thanks for the explanation.

Alex · Accepted Answer · 2016-10-05 14:36:59Z

1

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;

edited Oct 5, 2016 at 14:36

answered Oct 5, 2016 at 14:28

Alex

35.5k5 gold badges81 silver badges94 bronze badges

1 Comment

Robert Parham Over a year ago

this is great if youre using the latest firefox or chrome, anyone else is going to be SOL

Collectives™ on Stack Overflow

Disabling a Function With Another Function - Vanilla JS

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related