为何循环创建的按钮无法绑定JSON中定义的onclick命令？

咱们一步步来拆解你遇到的问题哈，核心其实是两个小错误导致按钮的点击事件绑定失败：

1. 先搞定window.onload的执行时机问题 #

你现在的代码里两次给window.onload赋值，而且第一次的写法完全错了：

window.onload = mkmdl(inputVar); // 这里是立即执行函数，不是赋值回调
window.onload = function() {
  inputVar["buttons"][1]["command"]; // 这行代码啥也没做，还覆盖了上面的赋值
};

• 第一行的mkmdl(inputVar)会立即执行，根本等不到页面加载完成（虽然你说按钮显示正常，但这是运气好，万一页面元素没加载完就会报错）；
• 第二行直接覆盖了第一行的window.onload，导致第一行的代码相当于白写了。

正确的写法应该是把mkmdl的调用放进回调函数里，确保页面加载完成后再执行：

window.onload = function() {
  mkmdl(inputVar);
};

2. 修复按钮onclick的绑定逻辑 #

你现在是把字符串形式的命令直接赋值给onclick，比如"console.log('Im a command');"，但onclick需要的是函数对象，不是字符串，浏览器根本不会把字符串当成代码执行。这里有两种解决方式：

方式一：把字符串转为可执行函数（适合你当前的JSON结构） #

用Function构造器把JSON里的命令字符串转成函数，直接赋值给onclick：

let x = obj["buttons"][i]["command"];
newElement.onclick = new Function(x); // 把字符串转成函数

⚠️ 注意：这种方式和eval类似，如果你的JSON来源不可信，会有安全风险，只适合你自己静态定义的场景。

方式二：重构JSON，直接存函数（更规范更安全） #

既然你的JSON是静态定义的，完全可以把命令写成函数而不是字符串，这是更符合JS规范的写法：

// 修改你的输入变量
let inputVar = {
  'buttons': [
    { 
      "button": "I'm a button", 
      "command": function() { console.log('Im a command'); } 
    }, 
    { 
      "button": "Me too", 
      "command": function() { console.log('Me too'); } 
    } 
  ],
  'message': "This here is our modle message.",
  'image': 'URL(image URL)'
};

// 然后在mkmdl里直接赋值函数
newElement.onclick = obj["buttons"][i]["command"];

完整修正后的代码 #

把上面的修复点整合起来，运行就能正常触发按钮点击事件了：

<body id="body"> </body>
<script>
let inputVar = {
  'buttons': [
    { 
      "button": "I'm a button", 
      "command": function() { console.log('Im a command'); } 
    }, 
    { 
      "button": "Me too", 
      "command": function() { console.log('Me too'); } 
    } 
  ],
  'message': "This here is our modle message.",
  'image': 'URL(image URL)'
};

function mkmdl(obj) {
  for (let i = 0, size = obj['buttons'].length; i < size; i++) {
    console.log(i);
    const btnText = obj["buttons"][i]["button"];
    const btnClickFn = obj["buttons"][i]["command"];
    const newButton = document.createElement("button");
    newButton.onclick = btnClickFn;
    newButton.innerHTML = btnText;
    // 给按钮加个间距，看起来舒服点
    newButton.style.margin = "0 8px 8px 0";
    document.getElementById("body").appendChild(newButton);
  }
}

window.onload = function() {
  mkmdl(inputVar);
};
</script>

额外小建议 #

• 尽量用const/let代替var，避免变量提升带来的坑；
• 如果后续要扩展模态框功能，可以把创建元素的逻辑封装成小函数，代码会更清晰。

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