Theodore Steiner Theodore Steiner - 2 months ago 17
CSS Question

Disabling a Function With Another Function - Vanilla JS

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

HTML:

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


JS:

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

};

Answer

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