JavaScript生成按钮onclick传参问题：如何传入变量值而非变量名

方法1：字符串拼接直接传入值 #

把变量potato的实际值拼接到onclick的字符串里，生成的按钮就会直接调用coolFunction(5)：

var potato = 5;
var btn = document.createElement("button");
// 直接拼接变量值到字符串中
btn.setAttribute("onclick", "coolFunction(" + potato + ");");

如果变量是字符串类型，记得要加引号（注意转义避免和外层引号冲突）：

var potato = "hello";
btn.setAttribute("onclick", "coolFunction('" + potato + "');");

方法2：使用addEventListener（推荐） #

这种方式不用拼接字符串，直接通过事件监听器绑定点击事件，函数内部会直接捕获当前potato的实际值，更安全也符合现代JS写法：

var potato = 5;
var btn = document.createElement("button");
btn.addEventListener('click', function() {
  coolFunction(potato);
});

原代码问题说明 #

你之前写的"coolFunction(potato);"是把字符串字面量传给onclick，浏览器执行时会去全局查找potato变量，而非使用创建按钮时的变量值。上面两种方法都能让按钮点击时传入创建时刻的实际值。

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