Javascript：防止onClick事件多次运行_Javascript_Html_Javascript Events_Onclick

Javascript：防止onClick事件多次运行

javascript html

Javascript：防止onClick事件多次运行,javascript,html,javascript-events,onclick,Javascript,Html,Javascript Events,Onclick,在上一个问题中，我在向DOM添加时遇到了.createElement问题。这已经解决了，但我还有一个问题。（）当我单击“计算”时，它会在文档中正确地创建一个新的。问题是每次单击“计算”时，它都会创建一个新的div我希望它只创建一次DIV，如果已经创建了DIV，我什么也不想做我尝试用两个函数来实现这一点 CheckDiv（）-如果为FALSE，则检查div是否已存在2 makeResponseBox（）-运行此函数，该函数可以独立工作，但每次都会创建新的div。onclick 在本机Javas

在上一个问题中，我在向DOM添加时遇到了.createElement问题。这已经解决了，但我还有一个问题。（）

当我单击“计算”时，它会在文档中正确地创建一个新的

。问题是每次单击“计算”时，它都会创建一个新的div我希望它只创建一次DIV，如果已经创建了DIV，我什么也不想做

我尝试用两个函数来实现这一点

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

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;

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

//用于检查响应div是否已存在的函数
函数checkDiv（）{
document.getElementById（“计算”）.onclick=函数（防止）{
prevent.preventDefault（）；
//检查div是否已经存在
var checkForDiv=document.getElementById（“responseBox”）；
如果（checkForDiv=null）{
//如果div不存在，则运行makeResponseBox函数
makeResponseBox；
}
}
}
//函数在提交时创建div
函数makeResponseBox（）{
var responseBox=document.createElement（“DIV”）；//创建
var para=document.createElement（“P”）；//创建
var text=document.createTextNode（“文本”）//
para.appendChild（text）；//将文本附加到para
var newDiv=responseBox.appendChild（para）；//将附加到变量并赋值给变量
document.body.appendChild（newDiv）；//作为子对象附加到
}//关闭函数（makeResponseBox）
window.onload=checkDiv；

HTML:

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

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


向DOM添加元素
向DOM添加元素

实际上，您没有指定

newDiv的id，因此出现了问题
但你甚至不需要这么做。只需取消设置单击处理程序
function checkDiv() {
    document.getElementById("calculate").onclick = function(prevent){
        document.getElementById("calculate").onclick=null;
        prevent.preventDefault();
        makeResponseBox(); // and also the braces there
    }
}

在函数中添加一行：
function makeResponseBox() {

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

这将禁用按钮，使其无法再次单击。
如果您的“计算”按钮将执行其他逻辑，因此可以多次单击，但您只想创建一次元素，也可以使用此按钮。\u somevalue

跟踪已创建的复选框，并且只有在尚未创建该元素时才执行

makeResponseBox

//用于检查响应div是否已存在的函数
函数checkDiv（）{
document.getElementById（“计算”）.onclick=函数（防止）{
prevent.preventDefault（）；
//检查div是否已经存在
var checkForDiv=document.getElementById（“responseBox”）；
//如果未创建复选框，请创建并分配给该复选框。\u checkDiv
if（this.\u checkDiv==null）{
这是._checkDiv=makeResponseBox（）；
}
//对创建的元素执行一些操作。
逻辑（本._checkDiv）；
}
}
功能逻辑（ele）{
警报（ele.innerHTML）；
}
//函数在提交时创建div
函数makeResponseBox（）{
var responseBox=document.createElement（“DIV”）；//创建
var para=document.createElement（“P”）；//创建
var text=document.createTextNode（“文本”）//
para.appendChild（text）；//将文本附加到para
var newDiv=responseBox.appendChild（para）；//将附加到变量并赋值给变量
document.body.appendChild（newDiv）；//作为子对象附加到
//返回创建的元素。
警报（“元素已创建”）；
返回newDiv；
}//关闭功能（makeResponseBox）
window.onload=checkDiv

向DOM添加元素
向DOM添加元素
if（checkForDiv=null）
将始终被视为false
，请更改为if（checkForDiv==null）
。谢谢@Lance，我已经尝试过了。问题是，下次我加载页面时，该属性仍然设置为禁用，因此无法工作。@Mau这不可能是真的。