Добавление класса при нажатии на кнопки

Question

У меня есть 10 кнопок с классом pin-code. Мне нужно сделать так, чтобы при нажатии на кнопку с этим классом к div-ам с классом pin-status (а их 4) добавлялся класс status-active, но по очереди, а не одновременно ко всем.

.pin-status {
  background-color: dark;
}

.status-active {
  background-color: green;
}

<div class="button-pin">
  <button class="pin-code">0</button>
  <button class="pin-code">1</button>
  <button class="pin-code">2</button>
  <button class="pin-code">3</button>
  <button class="pin-code">4</button>
  <button class="pin-code">5</button>
  <button class="pin-code">6</button>
  <button class="pin-code">7</button>
  <button class="pin-code">8</button>
  <button class="pin-code">9</button>
</div>
<div class="status-block">
  <div class="pin-status"></div>
  <div class="pin-status"></div>
  <div class="pin-status"></div>
  <div class="pin-status"></div>
</div>

Добавил вот такой js код, но он одновременно добавляет ко всем div-am класс status-active, а мне нужно что бы добавлялось по одному

var btns = document.getElementsByClassName('pin-code');
var par = document.getElementsByClassName('pin-status');
btns[0].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[1].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[2].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[3].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[4].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[5].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[6].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[7].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[8].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}
btns[9].onclick = function() {
  par[0].classList.add("status-active");
  par[1].classList.add("status-active");
  par[2].classList.add("status-active");
  par[3].classList.add("status-active");
}

Answer 1

Решение

Не надо весь этот термоядерный смесь из функций. Кратко и понятно:

document.querySelectorAll(`button.pin-code`).forEach((button) => { // Находим все кнопки с классом pin-code
  button.addEventListener(`click`, (event) => { // для каждой кнопки создаем нажатие
    const divCurrentCell = document.querySelector(`div.pin-status:not(.status-active)`); // которое находит первый div с классом pin-status и без класса status-active
    if (divCurrentCell) { // если такой div существует
      divCurrentCell.classList.add(`status-active`); // даем ему класс status-active
      divCurrentCell.innerText = button.innerText; // и бонус от меня :)
    }
  });
});

.pin-status {
  background-color: dark;
}

.status-active {
  background-color: green;
}

<div class="button-pin">
  <button class="pin-code">0</button>
  <button class="pin-code">1</button>
  <button class="pin-code">2</button>
  <button class="pin-code">3</button>
  <button class="pin-code">4</button>
  <button class="pin-code">5</button>
  <button class="pin-code">6</button>
  <button class="pin-code">7</button>
  <button class="pin-code">8</button>
  <button class="pin-code">9</button>
</div>
<div class="status-block">
  <div class="pin-status"></div>
  <div class="pin-status"></div>
  <div class="pin-status"></div>
  <div class="pin-status"></div>
</div>

БЛОГ НА HUSL

Добавление класса при нажатии на кнопки

Ответы (1 шт):

Решение