如何修改按钮onclick属性所指向的函数？

嘿，我发现你代码里的小问题啦！你现在用字符串形式给按钮的onclick赋值，比如"changeBack()"，这其实是比较老旧的写法，而且容易引发一些作用域相关的问题。正确的做法是直接把函数本身赋值给onclick，不需要加引号和括号哦！

问题所在 #

你当前的代码里：

document.getElementById("myButton").onclick = "changeBack()";

这里赋值的是一个字符串，浏览器会在全局作用域里尝试解析执行这个字符串，但现代JS更推荐直接绑定函数引用。

修改后的完整代码 #

function changeText() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
  document.getElementById("myButton").innerHTML = "Change that back";
  // 直接赋值函数引用，不用引号和括号
  document.getElementById("myButton").onclick = changeBack;
}

function changeBack() {
  document.getElementById("myHeader").innerHTML = "Hello World!";
  document.getElementById("myButton").innerHTML = "Change text";
  // 同样直接赋值函数引用
  document.getElementById("myButton").onclick = changeText;
}

为什么要这么改？ #

• onclick属性需要接收一个函数对象，而不是字符串。直接赋值函数名（不带括号）就是传递函数本身的引用，当按钮被点击时，浏览器会自动调用这个函数。
• 这种写法更高效，也更符合现代JavaScript的编码规范，还能避免字符串解析带来的潜在安全问题和作用域歧义。

如果之后你需要给按钮绑定多个点击事件，还可以用addEventListener方法，比如：

document.getElementById("myButton").addEventListener("click", changeBack);

不过针对你当前的需求，直接修改函数引用就完全够用啦！

内容的提问来源于stack exchange，提问作者user9642557