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

Question

[alekamisleforma]

Здравствуйте! Есть массив какой-то длины. Нужно к каждому элементу массива прикрепить по функции. Если делать так

var btn = document.querySelectorAll('.circle');
for(i=0; i<btn.length; i++){
		btn[i].onclick = function(){elem.style.marginLeft = i * (-100) + '%';}
	}

то получаем такой результат:

btn[2].onclick = function(){elem.style.marginLeft = 2 * (-100) + '%';}

И мне понятно почему. Но непонятно как получить следующее:

btn[0].onclick = function(){elem.style.marginLeft = 0 * (-100) + '%';}
btn[1].onclick = function(){elem.style.marginLeft = 1 * (-100) + '%';}
btn[2].onclick = function(){elem.style.marginLeft = 2 * (-100) + '%';}

??

Comments

[hzzzzl]

for(let i=0; ....

[Moses Fender]

Не проще разве раздать элементам некие индексы, которые в i, и навешать слушателей на один обработчик, в котором будет по клику браться значение и производиться над элементом действие?

[alekamisleforma]

hzzzzl, С let работает как нужно... Спасибо) Но почему это работает? Почему стандартное объявление переменной здесь не подходит?

[hzzzzl]

alekamisleforma, если честно я затрудняюсь на это ответить, начинал изучать когда уже были let/const, а var начинал уходить в небытие, то есть как-то сразу "привык" что в for(){} надо использовать let и никак иначе :)

[alekamisleforma]

hzzzzl, большое спасибо за помощь!)

Answer 1

[alex]

так происходит из-за того, что все ваши обработчики смотрят на одну и ту же i, т.к. она находится в их общйе области видимсти. когда цикл отработает она будет для всех обработчиков равна 2. чтобы исправить это, нужно замкнуть каждый обработчик на своей i.
сделать это можно несколькими способами:
1. инициализируйете счетчик через let:
for(let i = 0; i < btn.length; i++) {...}

2. вешайте обработчик внутри iife:

for(var i = 0; i < btn.length; i++){
  (function(i) {
    btn[i].onclick = function(e){e.target.style.marginLeft = i * (10) + 'px';}
  })(i)
}

3. forEach()

btn.forEach((el, i) => {
  el.onclick = function(e){e.target.style.marginLeft = i * (-100) + '%';}
})

Comments

[alekamisleforma]

Благодарю) Все работает)

Answer 2

[Роман]

Смотрите первый комментарий к вашему вопросу.
Это будет работать потому что у вас i действует в области видимости вне тела цикла. А если ее объявить как let, то она будет доступна только в области видимости в которой объявленна (то есть в теле цикла) и каждую итерацию цикла будет создаваться новая i, значение которой сохраниться в добавляемой функции как замыкание.

Comments

[alekamisleforma]

????? Я три часа с этим сидел! Почему это работает? У меня переменная i из одного цикла переходила в другой или в чем-то другом дело? Ваш код работает как надо)

[alekamisleforma]

Роман, большое спасибо!) Ужас сколько времени на это убил, а тут так просто все было.

[Роман]

alekamisleforma, всегда рад помочь)