How to record this cycle?

There is a js code, it works as it should, but I want to make it cycle. How to do it?
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()
}


I tried to do it, but it is not working:
for (var i = 0; i < experimentElem.length; i++) {
 experimentElem[i].onmouseenter = function() {
gifElem[i].play()
}

 experimentElem[i].onmouseleave = function() {
gifElem[i].pause();
}
}
April 4th 20 at 00:49
2 answers
April 4th 20 at 00:51
Solution
Replace var in let:
for (let i = 0; i < experimentElem.length; i++) {
April 4th 20 at 00:53
In the source variation var the variable i in any hung calls of the functions is the value of the series equal to the length experimentElem.

Replace the var in a let:
for (let i = 0; i < experimentElem.length; i++) {

old answer
Try this:
[...experimentElem].forEach((el, i) => {
 el.addEventListener('mouseenter', event => gifElem[i].play());
 el.addEventListener('mouseleave', event => gifElem[i].pause());
})
Does not work, gives:
Uncaught TypeError: experimentElem.forEach is not a function - stanford.Carroll commented on April 4th 20 at 00:56
What makes you think that target will have the necessary methods?
There is no need to rewrite anything, just need to tell the author of the question to derail in stages, the cycle he is normal. - victor.Kuhi commented on April 4th 20 at 00:59
@victor.Kuhilike in stages? - stanford.Carroll commented on April 4th 20 at 01:02
@stanford.Carroll, like this:
console.log( experimentElem );

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

then (if up to this point everything is OK) to bring the log within the handler function onmouseenterand see how gifElem[i] - victor.Kuhi commented on April 4th 20 at 01:05
@stanford.Carroll, updated the answer - Marcella.Pacocha commented on April 4th 20 at 01:08
@victor.Kuhi, and can show it on the example? (On stage with the console.log() everything OK, displays 4 items) - stanford.Carroll commented on April 4th 20 at 01:11
@stanford.Carroll, so we do a lot of guessing, washed down with codepen the minimum required, then I'll tell you exactly what it is. - victor.Kuhi commented on April 4th 20 at 01:14
@Marcella.Pacocha, Uncaught SyntaxError: Unexpected token '...' - stanford.Carroll commented on April 4th 20 at 01:17
@stanford.Carroll, in what browser/version you try? - Marcella.Pacocha commented on April 4th 20 at 01:20
@Marcella.Pacocha, in Chrome, latest version - stanford.Carroll commented on April 4th 20 at 01:23
https://codepen.io/Kirill777/pen/qBEpEGr - stanford.Carroll commented on April 4th 20 at 01:26
@stanford.Carroll, replace the var to let and you will be Massie:
for (let i = 0; i < experimentElem.length; i++) { - Marcella.Pacocha commented on April 4th 20 at 01:29
@Marcella.Pacocha, thank you! - stanford.Carroll commented on April 4th 20 at 01:32
@Marcella.Pacocha, just write your response separately, so I can choose your answer as correct - stanford.Carroll commented on April 4th 20 at 01:35

Find more questions by tags JavaScript