Question

在下面的代码中，为什么标题文本会在页面加载时更改，而不仅仅是在单击按钮后？

<h1 id="header">This is a header</h1>
<button id="btn1">Change text</button>
<script>
  function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}

button1 = document.getElementById("btn1")
button1.onclick = change_text("header", "something")
</script>

Answer 1

如果您想重用该功能并将onclick保留在标记之外，您可以这样做：

<h1 id="header">This is a header</h1>
<button id="btn1">Change text</button>
<script>
function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}

button1 = document.getElementById("btn1")
button1.onclick = function () {
    change_text("header", "something");
}
</script>

这使用名为anonymous function的内容。

点击此处了解详情：JavaScript Functions

Answer 2

你可以尝试：

<h1 id="header">This is a header</h1>
<button onclick="change_text('header', 'something')" id="btn1">Change text</button>
<script>
  function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}
</script>

我非常有信心能按照你的意愿工作..

Answer 3

问题是这一行：

button1.onclick = change_text("header", "something")

JS引擎将按以下顺序执行以下操作：

使用参数change_text和"header"

"something"

将change_text（在本例中为undefined）的结果分配给button1.onclick

Jane Doe's answer应该有效。如果要保留当前的代码结构，则可以使用以下代码：

button1.onclick = function(){
    change_text("header", "something");
};

这会创建anonymous function并将其分配给onclick。触发onclick时，它将执行调用change_text。

Answer 4

原因很简单：您已在代码中调用了change_text("header", "something")。你基本上做的是：

let res = change_text("header", "something") // already called, res is undefined
button1.onclick = res

如果您实际上正在传递一个事件处理程序，它应该看起来像button1.onclick = change_text，而change_text()代替event作为参数。或者在另一个答案中看到<button onclick="change_text('header', 'something')" id="btn1">Change text</button>（这会创建一个将在点击事件中调用的匿名函数）

脚本不等待onclick事件

4 个答案: