如何为一组按钮绑定onclick点击事件函数？

核心问题 #

1. querySelectorAll返回元素集合，无法直接绑定事件
   你用document.querySelectorAll(".keys")拿到的是NodeList（类数组的元素集合），不是单个DOM元素，直接给它加onClick完全无效，必须遍历每个元素单独绑定事件。

2. 函数调用方式错误
   keys.onClick = isLetterThere();里的isLetterThere()会在页面加载时立刻执行函数，而非把函数绑定到点击事件上。要传递函数本身的引用，必须去掉括号。

3. 冗余的变量覆盖
   循环里key = alphabet[i] + "Key";这行代码之后马上被key = document.createElement("button");覆盖，完全没用，可以直接删掉。

修正后的代码 #

let text;
let keys;

let alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
for(let i = 0; i < alphabet.length; i++){
    text = document.createTextNode(alphabet[i].toUpperCase());
    const key = document.createElement("button");
    key.appendChild(text);
    key.classList.add("keys");
    keyboard.append(key);
}

// 遍历元素集合，给每个按钮绑定点击事件
keys = document.querySelectorAll(".keys");
keys.forEach(key => {
    key.onclick = isLetterThere; // 注意是onclick（全小写），且不带括号
});

function isLetterThere(){
    console.log("fghjk")
}

额外说明 #

• DOM元素的事件属性是全小写的onclick，不是onClick。
• 也可以用更灵活的addEventListener绑定事件，比如key.addEventListener('click', isLetterThere)，这种方式支持给同一个事件绑定多个处理函数。

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