Как в JS реализовать клик с помощью addEventListener

Question

let divs = document.querySelectorAll('.row div')
for (let i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', divpress)
}

function divpress() {
  divs.innerHTML = Math.random()
}

.row {
  display: inline-flex;
  margin-left: 12%
}

.row div {
  height: 50px;
  width: 50px;
  margin: 10px;
  background-color: burlywood;
  text-align: center
}

.btns {
  text-align: center
}

<div class="btns">
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Есть 25 DIV. При клике на одном, внутри нужно вывести случайное число.

Не понимаю, в чём у меня ошибка?

Answer 1

Вы создаете массив, а затем делаете цикл с повторением равным количеству элементов массива.

Вместо этого лучше перебирать массив через forEach() и к каждому элементу массива добавлять eventListner.

Можно и вашим способом, ошибки в этом нет. Но forEach() "привычнее" что-ли.

Ошибка в самой функции. Вместо вот этого divs.innerHTML = Math.random() для того, чтобы положить случайное число внутрь div нужно обращаться к диву на который кликнули через this

Вот так:

let divs = document.querySelectorAll('.row div');
divs.forEach(function(elem) {
  elem.addEventListener('click', divpress)
})

function divpress() {
  this.innerHTML = Math.random()
}

.row {
  display: inline-flex;
  margin-left: 12%
}

.row div {
  height: 150px;
  width: 150px;
  margin: 10px;
  background-color: burlywood;
  text-align: center
}

.btns {
  text-align: center
}

<div class="btns">
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

БЛОГ НА HUSL

Как в JS реализовать клик с помощью addEventListener

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

Вот так: