TypeError: infos[i] is undefined

Question

I've setup a carousel with Materialize framework, now i would like to show some text with the mouseenter event, but it's seems it doesn't work. the display of my text is still none, and i have an error "TypeError: infos[i] is undefined".

The console.log(infos[i]) is working and the concerned divs have the display none attributes so i guess the problem comes from the line elem.addEventListener('mouseenter', function(){ infos[i].style.display="block" })

M.AutoInit();

document.addEventListener('DOMContentLoaded', function () {

    let interval = null
    const timeInterval = 5000
    const elem =  document.querySelector('.carousel')
    const carousel = M.Carousel.getInstance(elem, { 
        indicators: true
    })
    const iterate = () => carousel.next()
    const init = () => setInterval(iterate, timeInterval)
    interval = init()
    elem.addEventListener('mouseenter', () => clearInterval(interval))    
    elem.addEventListener('mouseleave', () => {
        interval = init()
    })

    var infos = document.querySelectorAll('.infos');
        for (i = 0; i<infos.length;i++){
            infos[i].style.display="none"
            //console.log(infos[i])
            elem.addEventListener('mouseenter', function(){
            infos[i].style.display="block"
            })
        }

})

Don't forget to define your variables, `for (i = 0;` and you will also need what's called block level scoping, so try -> `for (let i = 0;` — Keith, May 08 '19 at 13:17
Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) and [How do I pass the value (not the reference) of a JS variable to a function?](https://stackoverflow.com/questions/2568966) — adiga, May 08 '19 at 13:17
Not sure what you're trying to achieve here. It looks to me like your adding multiple mouseenter events to the `.carousel` (one for every `.infos`) with the end result being that on hover of the .carousel ALL the .infos are displayed. Is that correct? — Moob, May 08 '19 at 13:22
ok that's good with creating my variable with let. @Moob, i want to display the current .infos , indeed all my .infos are displayed ATM — Fxdpt, May 08 '19 at 13:38

Nicholas Tower · Answer 1 · 2019-05-08T14:01:26.943

You have a single global i variable which is being used by every one of the event listeners. By the time an event listener gets called, i has long since been incremented to infos.length, and infos[infos.length] is undefined. Instead create a local variable with let.

for (let i = 0; i<infos.length;i++){

let will cause it to get a new binding each time through the loop, and so each of the event listeners will be interacting with its own personal instance of i, and thus will interact with the correct element. Ps, make sure not to use var, or you'll be back to the same problem.

TypeError: infos[i] is undefined

1 Answers1