Как записать это циклом?

Question

[Kirill Tishko]

Есть js код, он работает как надо, но я хочу записать его циклом. Как это сделать?

experimentElem[0].onmouseenter = function() {
	gifElem[0].play()
}
experimentElem[0].onmouseleave = function() {
	gifElem[0].pause()
}

experimentElem[1].onmouseenter = function() {
	gifElem[1].play()
}
experimentElem[1].onmouseleave = function() {
	gifElem[1].pause()
}

experimentElem[2].onmouseenter = function() {
	gifElem[2].play()
}
experimentElem[2].onmouseleave = function() {
	gifElem[2].pause()
}

experimentElem[3].onmouseenter = function() {
	gifElem[3].play()
}
experimentElem[3].onmouseleave = function() {
	gifElem[3].pause()
}

Я пытался сделать это, но оно не работает:

for (var i = 0; i < experimentElem.length; i++) {
	experimentElem[i].onmouseenter = function() {
		gifElem[i].play()
	}

	experimentElem[i].onmouseleave = function() {
		gifElem[i].pause();
	}
}

Comments

[n1ksON]

почему изначально у вас в функциях стоит play и pause, а в цикле вы пишите gifElem[i].style.display = "none", в место play()?

Answer 1

[Сергей Соколов]

В исходном варианте с var переменная i в любых вызовах навешанных функций имеет последнее своё значение из цикла, равное длине experimentElem.

Замените var на let:
for (let i = 0; i < experimentElem.length; i++) {

старый ответ

Попробуйте так:

[...experimentElem].forEach((el, i) => {
  el.addEventListener('mouseenter', event => gifElem[i].play());
  el.addEventListener('mouseleave', event => gifElem[i].pause());
})

Comments

[Kirill Tishko]

Не работает, выдает:
Uncaught TypeError: experimentElem.forEach is not a function

[Пашенька]

С чего вы взяли, что таргет будет обладать необходимыми методами?
Тут не надо ничего переписывать, просто нужно сказать автору вопроса, чтобы дебажил поэтапно, цикл у него нормальный.

[Kirill Tishko]

like-a-boss, как поэтапно?

[Пашенька]

ktishko2016, так:
console.log( experimentElem );

for (var i = 0; i < experimentElem.length; i++) {
    console.log( experimentElem[i] );
}

потом (если до этого момента всё оукей) вывести лог внутри функции обработчика onmouseenterи посмотреть, как поживает gifElem[i]

[Сергей Соколов]

ktishko2016, обновил ответ

[Kirill Tishko]

like-a-boss, а можете показать это на примере? (На этапе с console.log() все оукей, выводит 4 элемента)

[Пашенька]

ktishko2016, так мы будем долго гадать, запилите codepen минимально необходимый, тогда скажу точно в чём дело.

[Kirill Tishko]

Сергей Соколов, Uncaught SyntaxError: Unexpected token '...'

[Сергей Соколов]

ktishko2016, в каком браузере/версии пробуете?

[Kirill Tishko]

Сергей Соколов, в Chrome, последняя версия

[Kirill Tishko]

https://codepen.io/Kirill777/pen/qBEpEGr

[Сергей Соколов]

ktishko2016, замените var на let и будет вам щассье:
for (let i = 0; i < experimentElem.length; i++) {

[Kirill Tishko]

Сергей Соколов, спасибо!

[Kirill Tishko]

Сергей Соколов, только напишите свой ответ отдельно, чтобы я мог выбрать ваш ответ как правильный

Answer 2

[Kirill Tishko]

Замените var на let:
for (let i = 0; i < experimentElem.length; i++) {