Какую пользу в этом коде несет цикл?

Question

Вот мой код. Не совсем понятно как здесь работает цикл.

let gas = document.querySelectorAll('.gas');
for(let i = 0; i < gas.length; i++) {
    gas[i].onclick = function() {
        let gallons = document.querySelector('.gallons').value;
        let amount = this.getAttribute('data');
        console.log(gallons * amount);
    }
}

<input type="text" name="" class='gallons'>
<div>
   <button class="gas" data='1.2'>A 92</button>
   <button class="gas" data='1.6'>A 95</button>
   <button class="gas" data='1.9'>A 98</button>
</div>

Получается, что без клика на какую-либо из кнопок тело цикла не будет работать и for будет просто перебирать элементы "вхолостую". А вот по клику на одну из кнопок запускается функция, которая находится в теле цикла.

Но мне не понятно как js понимает на какую именно кнопку мы нажали. Цикл-то успел отработать и перебрать все элементы еще до нажатия кнопки. Какую пользу здесь несет цикл?

Answer 1

"тело цикла" присваивает обработчик события onclick и все. И оно (тело) делает это очень хорошо. А код внутри обработчика будет выполняться по щелчку.

"на какую именно кнопку"

let amount = this.getAttribute('data');
             ^^^^

БЛОГ НА HUSL

Какую пользу в этом коде несет цикл?

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