点击按钮添加背景色功能失效，求正确实现方案

问题根源 #

1. 闭包作用域陷阱：循环里用var i声明变量，var是函数级作用域，当点击事件触发时，循环已经执行完毕，i的值会变成btn.length，此时btn[i]是undefined，自然无法设置背景色。
2. 选择器范围错误：document.querySelectorAll(".allbuttons")会把带有allbuttons类的<h2>也选中，导致数组里混入非按钮元素，进一步引发错误。

修正后的代码 #

<div id="container"></div>
<h2 id="result">Item 1</h2> 

<script>
const btnsContainer = document.getElementById("container");
const textBtn = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"];

// 批量创建按钮
for(let i = 0; i < textBtn.length; i++){
  btnsContainer.insertAdjacentHTML('beforeend', `<button class="allbuttons" value="${textBtn[i]}">${textBtn[i]}</button>`);
}

// 仅选中按钮元素，排除其他带allbuttons类的标签
const buttons = document.querySelectorAll("button.allbuttons");

// 绑定点击事件
buttons.forEach(btn => {
  btn.addEventListener('click', function(event) {
    // 更新结果文本
    document.getElementById("result").innerHTML = event.target.value;
    
    // 可选：清空所有按钮背景色，确保只有当前点击的按钮高亮
    buttons.forEach(b => b.style.background = "");
    // 给当前点击的按钮设置背景色
    event.target.style.background = "#000000";
  });
});
</script>

关键改动说明 #

• 用let i替代var i：let是块级作用域，每个循环迭代的i都是独立变量，避免闭包导致的取值错误。
• 精准选择器：button.allbuttons只选中按钮元素，不会误选<h2>。
• 使用forEach遍历绑定事件：比传统for循环更简洁，彻底规避作用域问题。
• 可选的重置逻辑：清空所有按钮背景色，实现“点击哪个哪个高亮”的交互（不需要的话可以删掉对应行）。

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