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 pleted 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:

 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 pleted 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 pleted any additional course work.</p>
<input type="radio" name="checkNo" id="checkNo" onclick="hideCourseWork()" />
<br />
<p id="undoNoAdditionalCourseWork" onclick="reAddCourseWork()">(Undo).</p>

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 pleted 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 pleted 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 pleted any additional course work.</p>
<input type="radio" name="checkNo" id="checkNo" onclick="hideCourseWork()" />
<br />
<p id="undoNoAdditionalCourseWork" onclick="reAddCourseWork()">(Undo).</p>

• javascript
• html
• css

Share Improve this question Follow edited Oct 6, 2016 at 10:34 chirag 1,77922 gold badges1818 silver badges3333 bronze badges asked Oct 5, 2016 at 14:22 Theodore SteinerTheodore Steiner 1,61522 gold badges2424 silver badges3535 bronze badges 4

• Im really confused what the issue is here? Are we not just hiding and displaying HTML elements based on a radio value? – 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 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 Commented Oct 5, 2016 at 14:41
• Thanks for the input! – Theodore Steiner Commented Oct 5, 2016 at 14:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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;
}

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;