Javascript: Prevent an onClick event from being run more than once
Question
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.
- CheckDiv() - check if div already exists if FALSE the 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>
3 answers
solution1
2 2015-07-09 17:55:14
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
}
}
solution2
0 2015-07-09 17:58:04
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.
solution3
0 2015-07-09 18:13:38
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.