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