如何用onclick为一组按钮分配一个功能；

Question

我只是想将相同的功能分配给一堆按钮。我在引用按钮时遇到了问题，我遇到了“querySelectorAll 不是函数”，对于 getElementByClass 也是如此，但在当前代码中，它引用了某些内容，因为该函数有效，但仅在加载时有效，而在单击时无效。

这是代码：

let key;
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++){
key = alphabet[i] + "Key";
text = document.createTextNode(alphabet[i].toUpperCase());
key = document.createElement("button");
key.appendChild(text);
key.classList.add("keys");
keyboard.append(key);
    }
keys = document.querySelectorAll(".keys");
keys.onClick = isLetterThere();

}

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

Answer 1

在您的代码中

keys = document.querySelectorAll(".keys");

这将返回一个集合。所以你需要迭代这个集合并向每个元素添加事件

您可以通过两种方式进行。您可以在创建按钮时添加

addEventListener

。

或者，您也可以使用

querySelectorAll

添加事件，这将返回

NodeList

然后循环集合并向其添加事件

let key;
let text;
let keys;
let keyboard = document.getElementById('keyboard')
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"];

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

function testAlternative() {
  console.log("testAlternative")
}

for (let i = 0; i < alphabet.length; i++) {
  key = alphabet[i] + "Key";
  text = document.createTextNode(alphabet[i].toUpperCase());
  key = document.createElement("button");
  key.appendChild(text);
  key.classList.add("keys");
  key.addEventListener('click', isLetterThere);
  keyboard.append(key);
}
document.querySelectorAll('.keys').forEach(elem => elem.addEventListener('click', testAlternative));

<div id='keyboard'></div>