Uncaught TypeError: span[element].style is undefined

Question

I am creating a hamburger button which is changing color on the scroll, everything is working fine but the only problem is that I am having an error in the console saying Uncaught TypeError: span[element].style is undefined

Please assist

Here is my JS code

window.addEventListener("scroll", function(){
    const headerMenu=document.querySelector(".header__menu");
    headerMenu.classList.toggle("changed", window.scrollY > 10);
    const li= document.querySelector(".header__menu__ul");
    const menuMobile=document.getElementsByClassName("menuMobile")[0];
    const span=menuMobile.children;
    if (this.window.scrollY>10){
        li.style.color="#746B6B";
        
    }
    else{
        li.style.color="white";
       
    }
    for(var element in span){
         if (this.window.scrollY>10){
            span[element].style.backgroundColor="black";
        }
        else{
            span[element].style.backgroundColor="white";
        }
    }


    

});

 <div id="menu" class="header__menu">
            <img alt="Logo" src="/images/logo.png">
            <ul class="header__menu__ul ">
                <li class="header__menu__ul__li ">Programs</li>
                <li class="header__menu__ul__li">Service</li>
                <li class="header__menu__ul__li">News</li>
                <li class="header__menu__ul__li"> About Us</li>
                <li class="header__menu__ul__li header__menu__ul__li--btn btn-primary"> Let's talk</li>
            </ul>
            <div class="menuMobile">
                <span class="menuMobile__first"></span>
                <span class="menuMobile__second"></span>
                <span class="menuMobile__third"></span>
            </div>
        </div>```

You are looping directly over the elements in the children, you can access it like "element.style" perhaps, since element is not an index but the actual element. — Jan, May 15 '22 at 08:11
check [`for...of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) — Suraj Rao, May 15 '22 at 08:26
Check the console here: https://jsfiddle.net/rqjx0Lfc/ to see why you're getting the error. Iterating over elements can be done with this: `menuMobile.querySelectorAll('span').forEach(span => { ... });` inside the arrow function you can now do something with `span.style`. — , May 15 '22 at 08:29
You should also replace `document.getElementsByClassName("menuMobile")[0]` with `document.querySelector(".menuMobile")` — , May 15 '22 at 08:30

score 0 · Answer 1 · answered May 15 '22 at 08:54

Thank you guys for your answers, I have actually used for...of and it works perfectly

for(const element of span){
    if (this.window.scrollY>10){
         element.style.backgroundColor="black";
        }
    else{
         element.style.backgroundColor="white";
      }
    }

but also this


    window.addEventListener("scroll", function(){
    const headerMenu=document.querySelector(".header__menu");
    headerMenu.classList.toggle("changed", window.scrollY > 10);
    const li= document.querySelector(".header__menu__ul");
    const menuMobile=document.getElementsByClassName("menuMobile")[0];
    const span=menuMobile.children;
  
    menuMobile.querySelectorAll('span').forEach(span => {
    span.style.backgroundColor="red";
     });
  });

Uncaught TypeError: span[element].style is undefined

1 Answers1