JavaScript 根据字典输入为数组元素创建按钮及按钮不显示问题修复

为什么明明写了创建按钮的逻辑，页面却啥都不显示 #

核心问题出在三个叠加的逻辑漏洞上，直接把整个执行流程卡断了：

• 点击事件绑定的写法完全错误
  你写的button.onclick = func2(key)，根本不是给按钮绑定“点击时执行func2”的逻辑，而是在当前代码运行的同步阶段就立刻调用func2(key)，把func2的返回值赋值给onclick属性。举个实际场景的例子：如果func2内部要操作某个不存在的DOM元素，或者参数不匹配直接抛错，整个循环会当场被强制中断，后面把按钮追加到页面的代码根本跑不到——哪怕JS内存里已经创建了按钮对象，也永远不会渲染到页面上。
• 数组遍历的方式拿错了内容
  你用for...in来遍历数组，这种语法本来是为普通对象遍历可枚举属性设计的，循环拿到的key不是数组里存储的实际值，而是字符串形式的数组索引（比如遍历["1","2"]的时候，key拿到的是"0"和"1"，不是你要的元素值"1"和"2"）。就算代码不报错，生成的按钮上显示的也是索引数字，和预期的展示内容完全对不上。
• 缺少基础输入校验，非法参数直接触发崩溃
  要是传进来的choice不在objects的键列表里，objects[choice]就是undefined，这时候尝试循环遍历undefined，会直接抛出类型错误，整个函数停止执行，自然啥按钮都生成不出来。

改完能直接运行的代码 #

// 提前拿到要放按钮的容器，不用每次循环都重复查询DOM
const buttonContainer = document.getElementById("example");

// 拦截非法输入，避免后续逻辑报错
if (!objects[choice]) {
  console.error("输入的选项不合法，仅支持传入one/two/three");
  return;
}

// 用for...of遍历数组，直接拿到数组里存储的实际元素值
for (const item of objects[choice]) {
  const newButton = document.createElement("button");
  // 直接把实际元素值设置为按钮的展示文本
  newButton.textContent = item;
  // 正确绑定点击事件：触发点击时才执行func2，传入当前对应的元素值
  newButton.addEventListener("click", () => {
    func2(item);
  });
  // 把按钮追加到页面容器中
  buttonContainer.appendChild(newButton);
}

几个容易踩的小提醒 #

• 别直接把func2(xxx)的调用结果赋值给onclick，要么用匿名函数包一层逻辑，要么用bind传参，确保只有点击行为发生时才触发func2的执行
• 遍历数组优先用for...of、普通for循环或者数组自带的forEach方法，别用for...in遍历数组，不然很容易混进原型链上的意外属性，拿到错误的值
• 写DOM生成逻辑的时候，要顺着代码流程顺一遍：从创建元素，到设置内容，到绑定事件，最后到appendChild到页面，哪一步被中断了，元素都不会在页面正常显示

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