Question

为什么会有差异？

document.getElementById（'click'）。onclick = a.replaceChild（c，b）---在没有单击按钮的情况下替换元素

但onclick =“a.replaceChild（c，b）”---仅在点击按钮后替换该元素

<div id="container">
<p id="welcome">no greetings yet</p>
<p id="products">oreo ice-cream</p>
</div>

<button id="click" **onclick="a.replaceChild(c,b)"**>CHANGE</button>

    <script>

        var a = document.getElementById('container');

        var b = document.getElementById('welcome');

        var c = document.createElement('h2');
        c.id = 'new';
        c.innerHTML = "WELCOME";

        **document.getElementById('click').onclick = a.replaceChild(c,b);**

    </script>

Answer 1

您没有包括括号：您指定了无参数函数，例如document.getElementById('foo')=bar;，而不是bar()。

您现在分配它的方式实际上是运行它，这意味着您要从该函数中分配返回值，而不是其名称。

这些参数比仅用括号命名函数稍微麻烦一些。

document.getElementById("click").onclick = function(c, b){return a.replacechild(c,b);}

这样做你正在寻找的东西。 JSFiddle

如果您对不是纯粹的基本javascript的解决方案感兴趣，那么jQuery＆＃39; .click()是一个不错的选择。另一个可能是adding an event listener而不是in some cases。

Answer 2

“document.getElementById（'click'）。onclick”只是在该行运行时返回状态onClick。可能在页面加载时。

您要做的是添加event listener，它将在.onclick状态中侦听更改。然后用它调用你的函数。

这就是onClick属性正在做的事情。通常建议使用事件监听器，以便您明确地将内容与JS逻辑分开。

脚本中的onclick属性vs onclick

2 个答案: