将元素保存到变量与仅调用 document.getElementByID() 之间的区别

Question

我意识到这个标题没有多大意义，但我不确定如何表达我的问题。我正在尝试了解如何向 JavaScript 中的按钮添加事件，但我运行遇到了一个我无法弄清楚的错误。这是两段代码（都在 window.onload 函数内）：

这个有效：

document.getElementById("button").onclick = function func() {
    document.getElementById("testParagraph").innerHTML = "I changed the text";
}

这个没有：

var button = document.getElementById("button");
button.onclick = document.getElementById("testParagraph").innerHTML = "I changed the text";

这里是 HTML:

<p id="testParagraph"> This <strong> is </strong> a test </p>
<button id="button">Run Test</button>

我的意思是第一个显示带有 "This is a test" 的段落，直到我单击按钮后，它才将其更改为 "I changed the text"。第二个不起作用，因为它会在页面加载后立即加载 "I changed the text"，而不是等待单击按钮。因为我是 JavaScript 的新手，这些对我来说看起来都一样，我使用它的 id 获取按钮，然后添加一个 onclick 事件侦听器。只是第二个将按钮分配给一个变量，而第一个只是用 getElementById 获取它。两者都是运行在 window.onload 函数中。有人可以帮我看看有什么不同吗？

编辑：我将第二段代码更改为以下代码并且它工作正常。

var buttonX = document.getElementById("button");
buttonX.onclick = function clicked() {
    document.getElementById("testParagraph").innerHTML = "I changed the text";
}

Answer 1

您必须将回调包装到 onclick 函数中。你不能像以前那样只写命令

var button = document.getElementById("button");
button.onclick = function(){ 
  document.getElementById("testParagraph").innerHTML = "I changed the text"; 
};

是否将对元素的引用存储在变量中在这里没有影响。

将元素保存到变量与仅调用 document.getElementByID() 之间的区别

Difference between saving an element to a variable and just calling document.getElementByID()

html

javascript

onclick

buttonclick