CODEWITHSUNDEEP
javascripthtmlonclickdom-events
Maurice Greenland
Maurice Greenland

Reputation: 315

Prevent an onClick event from being run more than once

In my previous question I had a problem with .createElement when adding to the DOM. That has already been resolved but I have another problem. (previous problem)

When I click "Calculate" it correctly creates a new <div> in the document. The problem is that it creates a new div every time I click "Calculate". I want it to create the DIV only once, and if the div is already created I want to do nothing.

I have tried to do this with two functions.

  1. CheckDiv() - check if div already exists if FALSE the 2.
  2. makeResponseBox() - run this function which works on its own but keeps creating new div's every time .onclick

What is the correct way of doing this in native JavaScript?

JavaScript:

//function to check if the response div already exists
function checkDiv() {
    document.getElementById("calculate").onclick = function(prevent) {
        prevent.preventDefault();
        //check if div already exists
        var checkForDiv = document.getElementById("responseBox");

        if(checkForDiv = null) {
            //If div does not exist then run makeResponseBox function
            makeResponseBox;
        }
    }
}

//function to create div on submit
function makeResponseBox() {
    var responseBox = document.createElement("DIV"); //create <div>
    var para = document.createElement("P"); //create <p>
    var text = document.createTextNode("Text"); //
    para.appendChild(text); //append text to para
    var newDiv = responseBox.appendChild(para); // append <p> to <div> and assign to variable
    document.body.appendChild(newDiv); //append as child to <body>
} //close function (makeResponseBox)

window.onload = checkDiv;

HTML:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Add Element to DOM</title>
      <script src="calculate.js"></script>
   </head>
   <body id="main">
      <h1>Add Element to DOM</h1>
      <form id ="form">
         <fieldset>
            <input type="submit" value="Calculate" id="calculate" />
         </fieldset>
         <!-- close fieldset -->
      </form>
      <!-- close form -->
   </body>
</html>

Upvotes: 0

Views: 2269

Answers (3)

fuyushimoya
fuyushimoya

Reputation: 9813

If your calculate button will do other logic, so it can be clicked many times, but you just want to create the element once, you can also use this._somevalue to keep track of the created checkbox, and only do the makeResponseBox when that element is not created yet.

//function to check if the response div already exists
function checkDiv() {
    document.getElementById("calculate").onclick = function(prevent){
        prevent.preventDefault();
        //check if div already exists
        var checkForDiv = document.getElementById("responseBox");
      
        // If the checkbox is not created, created and assign to this._checkDiv
        if (this._checkDiv == null) {
          this._checkDiv = makeResponseBox();
        }
      
        // Do something with the created element.
        logic(this._checkDiv);
    }
}

function logic(ele) {
  alert(ele.innerHTML);
}

//function to create div on submit
function makeResponseBox() {

        var responseBox = document.createElement("DIV"); //create <div>
        var para = document.createElement("P");//create <p>
        var text = document.createTextNode("Text");//
        para.appendChild(text);//append text to para
        var newDiv = responseBox.appendChild(para);// append <p> to <div> and assign to variable
        document.body.appendChild(newDiv);//append as child to <body>
       
        // Return the created element.
        alert("element created.");
        return newDiv;
}//close function (makeResponseBox)

window.onload=checkDiv;
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Add Element to DOM</title>
    <script src="calculate.js"></script>
</head>
<body id="main">
<h1>Add Element to DOM</h1>


<form id ="form">

    <fieldset>

        <input type="submit" value="Calculate" id="calculate" />


    </fieldset><!-- close fieldset -->

</form><!-- close form -->

</body>
</html>

Upvotes: 0

nicael
nicael

Reputation: 18995

Actually, you don't specify the id of your newDiv, therefore the problems.

But you don't even need to do it. Just unset the click handler.

function checkDiv() {
    document.getElementById("calculate").onclick = function(prevent){
        document.getElementById("calculate").onclick=null;
        prevent.preventDefault();
        makeResponseBox(); // and also the braces there
    }
}

Upvotes: 2

Lance
Lance

Reputation: 3932

Add a line to your function:

function makeResponseBox() {

    document.getElementById("calculate").disabled = true;

This will disable the button so it can't be clicked again.

Upvotes: 0

Related Questions