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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.