JavaScript onclick function 只工作一次（非常简单的代码）

Question

我知道有很多关于此的主题，但它们解决了一些可变问题。 我的要简单得多，但它不起作用。 只工作一次。

 var bt1; document.addEventListener('DOMContentLoaded', load); function load() { document.body.innerHTML += '<div>welcome</div>'; bt1 = document.getElementById('bt1'); bt1.onclick = clicked; } function clicked() { document.body.innerHTML += '<div>welcome</div>'; }

 <body> <button id="bt1">Click me</button> </body>

我尝试将clicked的 function 进出onclick语句（正如其他一些主题所建议的那样）。

我还尝试移动bt1变量声明（根本不使用变量）。

Answer 1

每当您分配给容器的innerHTML时（即使您只是与现有HTML串联），该容器的内容都将被删除，新的innerHTML 字符串将被解析，然后由浏览器呈现。 因此，以前附加到容器内部任何内容的侦听器将不再起作用。

 const container = document.querySelector('#container'); const child = container.children[0]; // Before: the child's parent is the `container`, as expected: console.log(child.parentElement); container.innerHTML += ''; // After: the child has no parent element! // If a listener was attached to the child before, // the child will no longer even be in the document! console.log(child.parentElement);

 <div id="container"> <div>child</div> </div>

对于您正在执行的操作，请使用insertAdjacentHTML ，它不会破坏侦听器，但是将执行与innerHTML +=类似的功能：

 var bt1; document.addEventListener('DOMContentLoaded', load); function load() { document.body.innerHTML += '<div>welcome</div>'; bt1 = document.getElementById('bt1'); bt1.onclick = clicked; } function clicked() { document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>'); }

 <body> <button id="bt1">Click me</button> </body>

或者，显式创建要追加的新元素，并使用appendChild ：

 var bt1; document.addEventListener('DOMContentLoaded', load); function load() { document.body.innerHTML += '<div>welcome</div>'; bt1 = document.getElementById('bt1'); bt1.onclick = clicked; } function clicked() { const div = document.createElement('div'); div.textContent = 'welcome'; document.body.appendChild(div); }

 <body> <button id="bt1">Click me</button> </body>

Answer 2

另一个快速解决方案是在单击的方法中重新附加侦听器。

 var bt1; document.addEventListener('DOMContentLoaded', load); function load() { document.body.innerHTML += '<div>welcome</div>'; bt1 = document.getElementById('bt1'); bt1.onclick = clicked; } function clicked(a) { document.body.innerHTML += '<div>welcome</div>'; bt1 = document.getElementById('bt1'); bt1.onclick = clicked; }

 <body> <button id="bt1">Click Me</button> </body>

Answer 3

我有同样的麻烦。 但是，我不想连接任何东西。

在我简单编写的脚本中，创建了一个简单的 function。 我使用秒来创建 0 到 30 之间的随机数； 然后我将 function 放入按钮中，这样当我单击按钮时，随机数被写入 DIV 元素。

但是，onclick 仅在初始单击时有效，并且控制台中没有任何脚本错误。

示例脚本： var time = new Date(); //创建随机数function chngTstFld(){ var ss = time.getSeconds(); var random_Number = ss; if(ss>30){ random_Number = random_Number - 30}; function chngTstFld(){ var ss = time.getSeconds(); var random_Number = ss; if(ss>30){ random_Number = random_Number - 30}; document.getElementById("tstFld").innerHTML = random_Number};

我想用 DIV 中的新数字替换数字，就像我单击按钮一样多次。

JavaScript onclick function 只工作一次（非常简单的代码）

问题描述

2 个解决方案

解决方案1
4 2018-11-13 04:26:01

解决方案2
0 2018-11-13 07:31:36

解决方案3
0 2022-08-13 12:13:36

JavaScript onclick function 只工作一次（非常简单的代码）

问题描述

2 个解决方案

解决方案1 4 2018-11-13 04:26:01

解决方案2 0 2018-11-13 07:31:36

解决方案3 0 2022-08-13 12:13:36

解决方案1
4 2018-11-13 04:26:01

解决方案2
0 2018-11-13 07:31:36

解决方案3
0 2022-08-13 12:13:36