Блог

Главная - Вопросы по программированию - уменьшение и увеличение кнопки с помощью Jav

уменьшение и увеличение кнопки с помощью Jav

#javascript #html #css

Вопрос:

Когда нажимается моя кнопка, она становится красной. При этом счетчик увеличивается. Однако я хотел бы, чтобы счетчик был динамичным. Таким образом, когда кнопка отменяется, счетчик тоже уменьшается. Однако я не могу этого сделать. Я не получил никаких ошибок.

 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>

Ответ №1:

вы должны использовать else свой второй , если никогда не сможете достичь того, как вы это написали:

 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>

Ответ №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 .

Метки: