When my button is being clicked, it turns red. With that, the counter increases. However, I would like the counter to be dynamic. In such a way when the button is being deselected, the counter decreases too. However, I'm unable to do so. I did not receive any errors.
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>you have to use else, your second if can't never be reached the way you wrote this:
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>You can do something like this:
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>The if else will check if the button contains the class "active" if it does it will increase the count by 1 or else if the button does not contain the class "active" it will decrease the count by 1.