使用Jav减少和增加按钮

Question

当我的按钮被点击时，它变成红色。 这样，计数器就会增加。 但是，我希望计数器是动态的。 这样当按钮被取消选择时，计数器也会减少。 但是，我无法这样做。 我没有收到任何错误。

 var buttons = document.getElementsByClassName("button"); var count = 0; var disp = document.getElementById("display"); for (let i = 0, l = buttons.length; i < l; i++) { buttons[i].addEventListener('click', function() { buttons[i].classList.toggle('active'); if (this.classList.contains("active")) { if (!this.classList.contains("active")) { count--; disp.innerHTML = count; } count++; disp.innerHTML = count; } }) }

 .active { background-color: #E68352 !important; } .button { background-color: #FFFFFF; }

 <input type="button" id="button1" class="button" value="A" /> <input type="button" id="button2" class="button" value="B" /> <input type="button" id="button3" class="button" value="C" /> <p> Button Clicked <span id="display">0</span> Times </p>

Answer 1

你必须使用else ，你的第二个 if 永远无法达到你写这个的方式：

 var buttons = document.getElementsByClassName("button"); var count = 0; var disp = document.getElementById("display"); for (let i = 0, l = buttons.length; i < l; i++) { buttons[i].addEventListener('click', function() { buttons[i].classList.toggle('active'); if (this.classList.contains("active")) { count++; } else { count--; } disp.innerHTML = count; }) }

 .active { background-color: #E68352 !important; } .button { background-color: #FFFFFF; }

 <input type="button" id="button1" class="button" value="A"> <input type="button" id="button2" class="button" value="B"> <input type="button" id="button3" class="button" value="C"> <p> Button Clicked <span id="display">0</span> Times </p>

Answer 2

你可以这样做：

 var buttons = document.getElementsByClassName("button"); var count = 0; var disp = document.getElementById("display"); for (let i = 0, l = buttons.length; i < l; i++) { buttons[i].addEventListener("click", function() { buttons[i].classList.toggle("active"); if (this.classList.contains("active")) count++; else count--; disp.innerHTML = count; }); }

 .active { background-color: #e68352 !important; } .button { background-color: #ffffff; }

 <input type="button" id="button1" class="button" value="A" /> <input type="button" id="button2" class="button" value="B" /> <input type="button" id="button3" class="button" value="C" /> <p> Button Clicked <span id="display">0</span> Times </p>

if else将检查按钮是否包含"active"类，如果包含，则将count增加1 ，否则，如果按钮不包含"active"类，则将count减少1 。