我正在为一个项目制作一个简单的游戏，需要在单击时在输入中显示每个按钮的相应值。
我能够使用"；getElementById"；成功使用以下JS：
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按钮重复这个代码，但我想使用"0"；循环；如果可能的话，只需一块代码就可以实现这一点。我做了以下尝试，只是试图模仿上面的代码；id"；而只是切换出"；按钮1"；对于循环通过"；按钮"；(我尝试过"querySelectorAll"one_answers"getElementsByClassName"(。我得到错误："；button.addEventListener不是函数"我不明白，因为在成功的单按钮代码"；button.addEventListener("点击"，函数(e("；也不是函数，但它有效。。。下面是循环尝试，后面是整个页面：
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>
添加大量事件侦听器将阻碍应用程序的性能。因此，在这种情况下，您可以使用事件委派技术。如果你想阅读更多关于这方面的内容，我发现这个链接非常足智多谋。如果你有任何疑问，请在评论中联系我。
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>循环通过按钮集合&为每个附加一个事件侦听器
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>您可以/应该使用用于。。。的"；或一个">用于。。。在"中；环在这种情况下，表示。。。是您似乎需要的。
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>