Question

在我之前的问题中，我在添加到DOM时遇到了.createElement问题。这已经解决但我有另一个问题。（previous problem）

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

我试过用两个函数来做这个。

CheckDiv（） - 如果FALSE为2，则检查div是否已存在。

makeResponseBox（） - 运行此函数，该函数可以自行运行，但每次都会创建新的div .onclick

在原生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>  </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

如果您的计算按钮会执行其他逻辑，那么可以多次单击它，但您只想创建一次元素，您也可以使用this._somevalue来跟踪创建的复选框，并且只做<{1}}时尚未创建该元素。

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;

Javascript：防止onClick事件多次运行

3 个答案: