Javascript queryselector.style.modify «неперехваченное TypeError»

Question

<script type="text/javascript"> 
    var ypos,sH,sH6,sIMG,sH4,sP; 
     function trigger(){ 
     ypos=window.pageYOffset; 
     /*..............................................Second page...*/ 
     sH=document.querySelector("#second h2"); 
     sH6=document.querySelector("#second h6"); 
     sIMG=document.querySelectorAll("#second img"); 
     sH4=document.querySelectorAll("#second h4"); 
     sP=document.querySelectorAll("#second p"); 
     /*.....................................Second page trigger...*/ 

     console.log(ypos); 
      sH.style.opacity=0; 
      if(ypos>120){ 
      sH.style.opacity=1; 
      sH.style.transition="3s"; 
     }; 
      sH6.style.opacity=0; 
      if(ypos>200){ 
      sH6.style.opacity=1; 
      sH6.style.transition="3s"; 
     }; 
      sIMG.style.opacity=0; 
      if(ypos>320){ 
      sIMG.style.opacity=1; 
      sIMG.style.transition="3s"; 
     }; 
      sH4.style.opacity=0; 
      if(ypos>400){ 
      sH4.style.opacity=1; 
      sH4.style.transition="3s"; 
     }; 
      sP.style.opacity=0; 
      if(ypos>480){ 
      sP.style.opacity=1; 
      sP.style.transition="3s"; 
     }; 

     }; 

    window.addEventListener("scroll",trigger); 
    </script> 

Когда я пытаюсь изменить «стиль» Я получаю ошибку

Uncaught TypeError: Cannot set property 'opacity' of undefined

Я считаю, что это список узлов, я пытался добавить [0] потому что это первый элемент, но без везения. Как определить объект?

Обычно я использую идентификаторы, но теперь у меня есть много элементов для анимации.

Я новичок в яваскрипт и я не знаю, как использовать JQuery

Answer 1

document.querySelectorAll возвращается NodeList, вам нужно итерацию над ним

Таким образом, для получения первого элемента вы можете с помощью [0]

sIMG[0].style 

---

Но document.querySelector не возвращает NodeList, он возвращает первый соответствующий элемент , Здесь вам не нужно получить первый элемент с помощью [0]

sH[0].style.opacity=0; 
// ^-- error here 

Оно должно быть:

sH.style.opacity=0;