按钮的自减和自增

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。