Javascript：阻止onClick事件多次运行

Question

在上一个问题中，添加到DOM时，.createElement存在问题。 那已经解决了，但是我还有另一个问题。 （以前的问题）

当我单击“计算”时，它将在文档中正确创建一个新的<div> 。 问题是，每当我单击“计算” 时，它都会创建一个新的div。 我希望它仅创建一次DIV ，如果已经创建了div，我什么也不做。

我试图用两个功能来做到这一点。

CheckDiv（）-如果FALSE 2，则检查div是否已经存在。
makeResponseBox（）-运行此函数，该函数可以单独运行，但每次都会创建新的div。

用本机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>

Answer 1

实际上，您没有指定newDiv的ID，因此存在问题。

但是您甚至不需要这样做。 只需取消点击处理程序即可。

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

Answer 2

在函数中添加一行：

function makeResponseBox() {

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

这将禁用该按钮，因此无法再次单击它。

Answer 3

如果您的calculate按钮将执行其他逻辑，因此可以单击多次，但是您只想创建一次元素，则还可以使用this._somevalue跟踪创建的复选框，并且仅在该元素时执行makeResponseBox尚未创建。

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

Javascript：阻止onClick事件多次运行

问题描述

3 个解决方案

解决方案1
2 2015-07-09 17:55:14

解决方案2
0 2015-07-09 17:58:04

解决方案3
0 2015-07-09 18:13:38

Javascript：阻止onClick事件多次运行

问题描述

3 个解决方案

解决方案1 2 2015-07-09 17:55:14

解决方案2 0 2015-07-09 17:58:04

解决方案3 0 2015-07-09 18:13:38

解决方案1
2 2015-07-09 17:55:14

解决方案2
0 2015-07-09 17:58:04

解决方案3
0 2015-07-09 18:13:38