querySelector((方法只返回与指定选择器匹配的第一个元素。要返回所有匹配项，请改用querySelectorAll((方法。
我一直在尝试使用javascript制作一个基于web的理货应用程序。我让它工作了，但只针对类的第一个实例(例如，第一个计数元素(。
如何使函数适用于理货元素的多个后续实例？
此外，我使用Bootstrap v1.3作为css，但没有添加冗长的代码。
非常感谢您的帮助！
let add = document.querySelector(".add");
let minus = document.querySelector(".minus");
let reset = document.querySelector(".reset");
let counter = document.querySelector(".counter");
add.addEventListener('click', addCounter);
minus.addEventListener('click', minusCounter);
reset.addEventListener('click', resetCounter);
function addCounter(item) {
counter_num = counter.innerHTML
counter.innerHTML = parseInt(counter_num) + 1
}
function minusCounter(){
counter_num = counter.innerHTML
if (counter_num == 0){
return false
}
counter.innerHTML = parseInt(counter_num) - 1
}
function resetCounter(){
if (counter.innerHTML == 0){
return false
}
if (confirm("Weet je zeker dat je de telling wilt resetten?") == true){
counter.innerHTML = 0;
resetCounter = "De telling is gereset!"
} else {}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width", initial-scale="1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Turf-app geadresseerd voorschrijven</title>
<style>
.counter{color:white; font-size: 25px; border-radius: 10%;max-width:50px;}
.tally_container{background-color:lightgrey; border-radius: 10px; padding:20px;}
.add{width: 38px; height: 38px;}
.minus{width: 38px; height: 38px;}
.title-text{color: white;}
.counter2{color:white; font-size: 25px; border-radius: 10%;max-width:50px;}
</style>
</head>
<body class="jumbotron bg-dark">
<h1 class="text-center mx-4 mt-4 mb-5 title-text">Turf-app geadresseerd voorschrijven</h1>
<div class="container" id="1">
<div class="tally_container mt-3 mb-3" name="tally-element">
<div class="vraag-container mb-3">
<h3>Patiënten zonder recept</h3>
</div>
<div class="counter-div text-center">
<div class="mx-2 text-center mb-2 counter bg-dark">0</div>
</div>
<div class="buttons">
<button class="btn btn-success mx-2 add">+</button>
<button class="btn btn-danger mx-2 minus">-</button> <br>
<button class="btn btn-primary mx-3 mt-4 reset">Reset</button>
</div>
</div>
</div>
<div class="container" id="2">
<div class="tally_container mt-3 mb-3" name="tally-element">
<div class="vraag-container mb-3">
<h3>No-shows</h3>
</div>
<div class="counter-div text-center">
<div class="mx-2 text-center mb-2 counter bg-dark">0</div>
</div>
<div class="buttons">
<button class="btn btn-success mx-2 add">+</button>
<button class="btn btn-danger mx-2 minus">-</button> <br>
<button class="btn btn-primary mx-3 mt-4 reset">Reset</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>let add = document.querySelectorAll(".add");
...
add.forEach(elem => elem.addEventListener('click', addCounter));
在一些帮助下，我成功地修复了它。每次单击按钮，都应该抓住最近的".counter"。请参阅代码。
let add = document.querySelectorAll(".add");
let minus = document.querySelectorAll(".minus");
let reset = document.querySelectorAll(".reset");
add.forEach(elem =>elem.addEventListener('click', addCounter));
minus.forEach(elem =>elem.addEventListener('click', minusCounter));
reset.forEach(elem=> elem.addEventListener('click', resetCounter));
function addCounter(elem) {
let counter = elem.target.closest(".container").querySelector(".counter")
counter_num = counter.innerHTML
counter.innerHTML = parseInt(counter_num) + 1
}
function minusCounter(elem){
let counter = elem.target.closest(".container").querySelector(".counter")
counter_num = counter.innerHTML
if (counter_num == 0){
return false
}
counter.innerHTML = parseInt(counter_num) - 1
}
function resetCounter(elem){
let counter = elem.target.closest(".container").querySelector(".counter")
if (counter.innerHTML == 0){
return false
}
if (confirm("Weet je zeker dat je de telling wilt resetten?") == true){
counter.innerHTML = 0;
resetCounter = "De telling is gereset!"
} else {}
}