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>

通过工作，我的意思是第一个用＆＃34显示段落;这是一个测试＆＃34;直到我点击按钮，然后将其更改为＆＃34;我更改了文本＆＃34;。第二个不起作用，因为它加载＆＃34;我改变了文本＆＃34;只要页面加载而不是等待单击按钮。因为我是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（）

1 个答案: