0

Необходимо найти все div на странице и добавить каждому слушатель по клику ("click"). И при клике на div происходила смена цвета фона. Подскажите, что не так сделал

let elem1 = document.querySelectorAll('box');

elem1.forEach(function(document) {
  document.addEventListener("click", function() {
    this.style.backgroundColor = "black";
  });
});
.box {
  margin: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

2 ответа 2

1

Вы пропустили точку у селектора класса в querySelectorAll

let elem1 = document.querySelectorAll('.box');

elem1.forEach(function(document) {
  document.addEventListener("click", function() {
    this.style.backgroundColor="black"; 
  });
});
.box {
  margin: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

3
  • Ох, как же я долго мучался, спасибо) 30 янв 2019 в 13:03
  • А не подскажете, как сделать, что бы при нажатии он возвращал цвет? 30 янв 2019 в 13:05
  • @GlebPristupa да, самый адекватный вариант classList.toggle() 30 янв 2019 в 13:09
1

[...document.querySelectorAll('.box')].forEach((s) => {
  s.addEventListener('click', function() {
    [...document.querySelectorAll('.box')].forEach((s) => {
      s.classList.remove('black');
    });
    s.classList.contains('black') ? s.classList.remove('black') : s.classList.add('black');
  });
});
.black {
  background: black;
}

.box {
  margin: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Ваш ответ

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

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