0

У меня есть 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");
}
5
  • 1. Нужно так нужно. Где столкнулись с проблемой? 2. Что имеете в виду под "по очереди"?
    – eccs0103
    21 дек 2022 в 4:08
  • Я не знаю как правильно сделать это на javascript.
    – Intges
    21 дек 2022 в 4:25
  • По очереди имею ввиду, то что есть 4 таких класса и мне не нужно одновременное добавление для всех этих классов класса status-active, мне нужно что бы добавлялось к каждому классу pin-status по одному при нажатии
    – Intges
    21 дек 2022 в 4:26
  • т.е я нажал на кнопку и добавилось к одному диву status-active, я нажал на вторую кнопку добавилось ко второму диву status-active и т.д
    – Intges
    21 дек 2022 в 4:26
  • отредактировал тему, добавил js код
    – Intges
    21 дек 2022 в 5:42

1 ответ 1

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>

4
  • Спасибо огромное ), всё работает, очень долго мучался.
    – Intges
    21 дек 2022 в 6:42
  • Ещё хотел спросить, не могли бы Вы подсказать как сделать что-бы кнопка с классом "pin-delete", автоматически удаляла абсолютно все "status-active"
    – Intges
    21 дек 2022 в 6:43
  • @Intges пожалуйста. Если ответ правильный отметьте галочкой. А ваш второй вопрос можно решить посмотрев на ответ первого. Посмотрите на комментарии, поймете. Решение показать не буду - очень уж тривиальный вопрос (еще потому что не дома 😁)
    – eccs0103
    21 дек 2022 в 6:56
  • хорошо, все ровно спасибо Вам огромное )
    – Intges
    21 дек 2022 в 6:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.