Как работает эта функция [цикл]?

Question

function SquareIndex() {
  let item = document.getElementsByClassName('square');
  for (let i = 0; i < item.length; i++) {
    item[i].onclick = function() {
      alert(i);
    }
  }
}

SquareIndex();

<div class="square">0</div>
<div class="square">1</div>

В кратце , я знаю что делает эта функция , но мне не понятно до конца как там все происходит . Проверил что запускается функция , в последствии и сам цикл , ровно 1 раз. Это получается на каждый элемент с классом (square) вешается "обработчик события - onclick"? Тогда как запоминается индекс каждого элемента списка. Тяжело объяснить свою мысль, так что sorry за такую формулировку.

Answer 1


    function SquareIndex() { 
        item = document.getElementsByClassName('square'); // Получаем все элементы с классом square
        alert('SquareIndex function is ready'); // При запуске функции выводим сообщение
        for (let i = 0; i < item.length; i++) { // Перебираем элементы
            item[i].onclick = function() { // Для каждого элемента с классом square при нажатии выводим сообщение
                alert(i); // Вот вывод сообщения с порядковым номеров этого элемента, по которому нажали.
            }
        }
    }

БЛОГ НА HUSL

Как работает эта функция [цикл]?

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