javascript - onclick 属性与脚本中的 onclick

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('click').onclick"只是在该行运行时返回 onClick 状态。可能在页面加载时。

你想要做的是添加一个 event listener它将监听 .onclick 状态中的变化。然后用它调用你的函数。

这就是 onClick 属性所做的。通常建议使用事件监听器，这样您就可以清楚地将内容与 JS 逻辑分开。