个人中心
gpt4 book ai didi

javascript - 防止 onClick 事件运行多次

转载 作者：行者123 更新时间：2023-12-02 15:59:30 25 4
gpt4 key购买 nike

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

当我单击“计算”时，它会正确创建一个新的 <div>在文件中。问题是，每次我单击“计算”时，它都会创建一个新的 div。 我希望它只创建 DIV 一次，如果 div 已经创建，我不想执行任何操作。

我尝试用两个函数来做到这一点。

  1. CheckDiv() - 检查 div 是否已存在，如果为 FALSE 则 2。
  2. makeResponseBox() - 运行这个函数，它可以独立工作，但每次都会创建新的div .onclick

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

最佳答案

实际上，您没有指定 newDiv 的 id，因此会出现问题。

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

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

关于javascript - 防止 onClick 事件运行多次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31324775/

25 4 0
文章推荐： java - Apache Ignite 频繁缓存关闭异常
文章推荐： c++ - 当从宏传递到函数时，避免传递 void 表达式
文章推荐： django - 使用 Django 表单向导为登录页面实现安全的双因素身份验证
文章推荐： function - 不导入模块不区分大小写。我需要原始输出而不是较低的输出
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com