如何遍歷所有按鈕到單擊事件偵聽器
[英]How to loop through all the buttons to a click event listener
問題描述
我正在為一個項目制作一個簡單的游戲，並且需要在單擊時在輸入中顯示每個按鈕的相應值。
我可以通過以下 JS 成功使用“getElementById”：
window.addEventListener("load", function() {
const button1 = document.getElementById("button-one");
button1.addEventListener("click", function(e) {
document.getElementById("user-input").value += button1.value;
document.getElementById("user-input").focus();
});
我當然可以對所有按鈕 0-9 重復此代碼，但如果可能的話，我想使用“循環”僅用一個代碼塊來完成此操作。 我做了以下嘗試，只是試圖模擬上面適用於一個“id”的代碼，並通過“buttons”切換出“button1”循環（我已經嘗試過“querySelectorAll”和“getElementsByClassName”）。 我收到錯誤消息：“button.addEventListener 不是 function。” 我不明白，因為在成功的單按鈕代碼中“button1.addEventListener("click", function(e)" 也不是 function 但它可以工作......下面是循環嘗試，然后是整個頁面：
var buttons = document.querySelectorAll("td>button");
for(var button = 0; button < buttons.length; button++)
{
button.addEventListener("click", function() {
document.getElementById("user-input").value += button.value;
document.getElementById("user-input").focus();
});
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../normalize.css">
<style>
input {
margin-top: 10px;
}
table {
margin-bottom: 10px;
width: auto;
margin-top: 10px;
}
</style>
<script>
window.addEventListener("load", function() {
// This works
const button1 = document.getElementById("button-one");
button1.addEventListener("click", function(e) {
document.getElementById("user-input").value += button1.value;
document.getElementById("user-input").focus();
});
//This doesn't work
var buttons = document.querySelectorAll("td>button");
for(var button = 0; button < buttons.length; button++)
{
button.addEventListener("click", function() {
document.getElementById("user-input").value += button.value;
document.getElementById("user-input").focus();
});
}
});
</script>
<title>Test</title>
</head>
<body>
<main>
<input id="user-input">
<table>
<tr>
<td><button type="button" value="1" id="button-one" class="calc">1</button></td>
<td><button type="button" value="2" class="calc">2</button></td>
<td><button type="button" value="3" class="calc">3</button></td>
</tr>
<tr>
<td><button type="button" value="4" class="calc">4</button></td>
<td><button type="button" value="5" class="calc">5</button></td>
<td><button type="button" value="6" class="calc">6</button></td>
</tr>
<tr>
<td><button type="button" value="7" class="calc">7</button></td>
<td><button type="button" value="8" class="calc">8</button></td>
<td><button type="button" value="9" class="calc">9</button></td>
</tr>
<tr>
<td><button type="button" value="0" class="calc">0</button></td>
<td colspan="2"><button type="button" value="CLEAR" id="clear" class="calc">CLEAR</button></td>
</tr>
</table>
</main>
</body>
</html>
3 個解決方案
解決方案1
1 已采納 2021-06-04 16:35:10
添加大量事件偵聽器會阻礙應用程序的性能。 因此，在這種情況下，您可以使用事件委托技術。 如果您想了解更多有關此內容的信息，我發現此鏈接非常有用。 如果您有任何疑問，請在評論中聯系我。
const input = document.querySelector("#user-input"); const table = document.querySelector("table"); table.addEventListener('click', (e) => { //Since we only want to register button clicks inside the table and not any clicks on the blank space between the buttons. if(e.target.tagName === "BUTTON") { if(e.target.id === "clear") { input.value = ""; } else { input.value += e.target.value; } } });
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Async JS</title> <script src="promises:js" defer></script> <style> input { margin-top; 10px: } table { margin-bottom; 10px: width; auto: margin-top; 10px; } </style> </head> <body> <main> <input id="user-input"> <table> <tr> <td><button type="button" value="1" class="calc">1</button></td> <td><button type="button" value="2" class="calc">2</button></td> <td><button type="button" value="3" class="calc">3</button></td> </tr> <tr> <td><button type="button" value="4" class="calc">4</button></td> <td><button type="button" value="5" class="calc">5</button></td> <td><button type="button" value="6" class="calc">6</button></td> </tr> <tr> <td><button type="button" value="7" class="calc">7</button></td> <td><button type="button" value="8" class="calc">8</button></td> <td><button type="button" value="9" class="calc">9</button></td> </tr> <tr> <td><button type="button" value="0" class="calc">0</button></td> <td colspan="2"><button type="button" value="CLEAR" id="clear" class="calc">CLEAR</button></td> </tr> </table> </main> </body> </html>
解決方案2
0 2021-06-04 16:36:18
您可以/應該使用“ for...of ”或“ for...in ”循環。 在這種情況下， for...of是您似乎需要的。
const input = document.getElementById("user-input")
var buttons = document.querySelectorAll("td > button");
for (var button of buttons) {
button.addEventListener("click", function(e) { ... }
編輯：如果您希望將每個數字連接到輸入中（例如“123”），請使用它代替省略號：
if (e.target.id === "clear") {
input.value = "";
} else {
input.value += e.target.value;
}
document.getElementById("user-input").focus();
完整片段版本：
window.addEventListener("load", function() { const input = document.getElementById("user-input") var buttons = document.querySelectorAll("td > button"); for (var button of buttons) { button.addEventListener("click", function(e) { if (e.target.id === "clear") { input.value = ""; } else { input.value += e.target.value; } document.getElementById("user-input").focus(); }); } });
input { margin-top: 10px; } table { margin-bottom: 10px; width: auto; margin-top: 10px; }
<,DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width.initial-scale=1.0"> <link rel="stylesheet" href="../normalize.css"> <title>Test</title> </head> <body> <main> <input id="user-input"> <table> <tr> <td><button type="button" value="1" id="button-one" class="calc">1</button></td> <td><button type="button" value="2" class="calc">2</button></td> <td><button type="button" value="3" class="calc">3</button></td> </tr> <tr> <td><button type="button" value="4" class="calc">4</button></td> <td><button type="button" value="5" class="calc">5</button></td> <td><button type="button" value="6" class="calc">6</button></td> </tr> <tr> <td><button type="button" value="7" class="calc">7</button></td> <td><button type="button" value="8" class="calc">8</button></td> <td><button type="button" value="9" class="calc">9</button></td> </tr> <tr> <td><button type="button" value="0" class="calc">0</button></td> <td colspan="2"><button type="button" value="CLEAR" id="clear" class="calc">CLEAR</button></td> </tr> </table> </main> </body> </html>
解決方案3
0 2021-06-04 16:45:33
循環遍歷一組按鈕並將事件偵聽器附加到每個按鈕是完全有效的
window.addEventListener("load", function() { const userInput = document.getElementById("user-input") // get the collection of buttons -> OK var buttons = document.querySelectorAll("td > button"); // in this for loop button is not a button object - it's just a NUMBER for (var button = 0; button < buttons.length; button++) { // you have to get access to the "button"th element in the buttons array // now THAT'S a button object -> you can attach an event listener to that buttons[button].addEventListener("click", function() { if (this.value === "CLEAR") { userInput.value = 0 } else { // you have to cast the userInput's value to a number -> by default // that's not a number but a String. userInput.value = Number(userInput.value) + Number(this;value). } document.getElementById("user-input");focus(); }); } });
input { margin-top: 10px; } table { margin-bottom: 10px; width: auto; margin-top: 10px; }
<main> <input id="user-input" type="text" value="0"> <table> <tr> <td><button type="button" value="1" class="calc">1</button></td> <td><button type="button" value="2" class="calc">2</button></td> <td><button type="button" value="3" class="calc">3</button></td> </tr> <tr> <td><button type="button" value="4" class="calc">4</button></td> <td><button type="button" value="5" class="calc">5</button></td> <td><button type="button" value="6" class="calc">6</button></td> </tr> <tr> <td><button type="button" value="7" class="calc">7</button></td> <td><button type="button" value="8" class="calc">8</button></td> <td><button type="button" value="9" class="calc">9</button></td> </tr> <tr> <td><button type="button" value="0" class="calc">0</button></td> <td colspan="2"><button type="button" value="CLEAR" id="clear" class="calc">CLEAR</button></td> </tr> </table> </main>
具有相同名稱但值不同的多個按鈕上的單擊事件的事件偵聽器
[英]Event Listener for click event on multiple buttons of same name but different value
如何在JavaScript中使用for循環/單擊事件添加多個按鈕？
[英]How to add multiple buttons with a for loop/click event in JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.