我有 3 个类名为“btn”的按钮; 如何使用 addEventListener 和 forEach 选择所有按钮? 我不一一选择 HTML 代码:
<div class="display">
<input type="number" class="text">
</div>
<div class="buttons">
<input type="button" value="1" class="btn">
<input type="button" value="2" class="btn">
<input type="button" value="3" class="btn">
</div>
JS代码:
const display = document.querySelector(".text"),
btn = document.querySelectorAll(".btn");
btn.addEventListener("click", buttons);
function buttons() {
display.value = btn.value;
};
最佳答案
您可以使用 for...of
对于这样的:
const btns = document.querySelectorAll('.btn');
for (const btn of btns) {
btn.addEventListener('click', function() {
console.log(this.value);
});
}
<input type="button" value="1" class="btn">
<input type="button" value="2" class="btn">
<input type="button" value="3" class="btn">
要使用 forEach()
,您必须首先使用 Array.from()
将 btns
DOM 节点转换为数组,例如:
const btns = document.querySelectorAll('.btn');
Array.from(btns).forEach(function(btn) {
btn.addEventListener('click', function() {
console.log(this.value);
});
});
<input type="button" value="1" class="btn">
<input type="button" value="2" class="btn">
<input type="button" value="3" class="btn">
关于javascript - 如何在 JS dom(无 jQuery)中使用 forEach 选择所有按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51215161/