Cuando se hace clic en mi botón, se vuelve rojo. Con eso, el contador aumenta. Sin embargo, me gustaría que el contador fuera dinámico. De tal forma que cuando se deselecciona el botón, el contador también decrece. Sin embargo, soy incapaz de hacerlo. No recibí ningún error.
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>tienes que usar else , tu segundo if nunca se puede alcanzar de la forma en que escribiste esto:
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>Puedes hacer algo como esto:
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> El if else verificará si el botón contiene la clase "active" , si lo hace, aumentará el count en 1 o, si el botón no contiene la clase "active" , disminuirá el count en 1 .