Whenever the button is clicked, it changes its color to red. Additionally, a counter increments with each click. However, I want the counter to be dynamic so that when the button is unclicked, the counter decreases as well. Unfortunately, I am facing difficulty achieving this and no errors are being displayed.
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>