qna.habr #1

by Anatoly Kulikov

HTML

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

CSS

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 360px;
  height: 360px;
  background-color: #313130;
  box-sizing: border-box;
}

.item {
  display: block;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: #f4f3f4;
  box-sizing: border-box;
}

JavaScript

let itemCollection = document.getElementsByClassName('item');

for (let i = 0; i < itemCollection.length; i++) {
  itemCollection[i].addEventListener('click', () => {
    alert('click on ' + itemCollection[i].innerText);
  })
}