How to Disable Functionality Using a Different Function in Vanilla JavaScript

Question

How to Disable Functionality Using a Different Function in Vanilla JavaScript

Is there a way to disable one function with another in JavaScript? I have a form that shows additional coursework inputs only if the user has completed extra work, but I want to add a failsafe in case they change their mind.

I need assistance in writing a failsafe function that checks if the first function has been triggered and then disables 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>

javascript html css

Answer 1

Answer №1

Your question is a bit unclear, but here's some clarification that might help.

Functions can be thought of as similar to variables in that they can be reassigned, such as to an empty function.

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

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

If you need to re-enable the function at a later point, you can use this approach:

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

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

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

Answer 2

Your question is a bit unclear, but here's some clarification that might help.

Functions can be thought of as similar to variables in that they can be reassigned, such as to an empty function.

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

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

If you need to re-enable the function at a later point, you can use this approach:

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

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

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

Answer 3

Answer №2

let exampleFunction = () => { /* defining an example function */ },
    anotherFunction = exampleFunction;

/* changing the implementation of exampleFunction to an empty function, effectively disabling it */
exampleFunction = () => {};

/* ... code that utilizes the function reference exampleFunction ...*/

/* re-enabling the original behavior of exampleFunction by assigning anotherFunction back to it */
exampleFunction = anotherFunction;

For archival purposes (ES5):

var exampleFunction = function() { /* defining an example function */ },
    anotherFunction = exampleFunction;

/* changing the implementation of exampleFunction to an empty function, effectively disabling it */
exampleFunction = function(){};

/* ... code that utilizes the function reference exampleFunction ...*/

/* re-enabling the original behavior of exampleFunction by assigning anotherFunction back to it */
exampleFunction = anotherFunction;

Answer 4

let exampleFunction = () => { /* defining an example function */ },
    anotherFunction = exampleFunction;

/* changing the implementation of exampleFunction to an empty function, effectively disabling it */
exampleFunction = () => {};

/* ... code that utilizes the function reference exampleFunction ...*/

/* re-enabling the original behavior of exampleFunction by assigning anotherFunction back to it */
exampleFunction = anotherFunction;

For archival purposes (ES5):

var exampleFunction = function() { /* defining an example function */ },
    anotherFunction = exampleFunction;

/* changing the implementation of exampleFunction to an empty function, effectively disabling it */
exampleFunction = function(){};

/* ... code that utilizes the function reference exampleFunction ...*/

/* re-enabling the original behavior of exampleFunction by assigning anotherFunction back to it */
exampleFunction = anotherFunction;

How to Disable Functionality Using a Different Function in Vanilla JavaScript

Answer №1

Answer №2

Similar questions

Creating a custom JavaScript grid from the ground up

Activate a timer as soon as the page is first loaded. The timer must continue running from the initial load even if the user leaves

What are the best practices for creating and displaying functional components effectively?

Tips for passing an object by value to an Angular2+ component

What was the functionality of visibilitychange implemented for?

JavaScript Function Call Crashes Script

React Native (or React) utilizes separate TypeScript modules to detect and respond to style adjustments for dark mode

Tips for creating query requests in ExpressJS

Discovering the quantity of pagination tabs in Selenium WebAutomation

Transform the styles from a React component into Cascading Style Sheets

How can I center an image next to text on two lines, that is compatible with IE7?

The window resizing function continues on an endless loop

What are the steps for running app.js deployed on a remote server using the local bash terminal?

Retrieve an image from an external web service and transfer it to a different route in Express.js

Using jQuery and CSS to change to "loading" status

React component fails to display content following execution of Jquery Ajax request

Troubleshooting Problems with Loading Data into Highcharts using Javascript

What strategies can be implemented to minimize the use of if-else statements?

Retrieving the value of the selected item when it is changed

What could be causing my css stylesheet to not function properly in Sinatra?