함수를 호출하는 자바 스크립트 루프

Question

동일한 ID 태그를 가진 여러 그림으로 onmouseover, onmouseout 및 onclick을 알아 내려고했습니다. 이를 위해 .length 루프가 필요하다는 것을 알고 있습니다. 이 코드는 길이 루프없이 작동

...

window.onload = setPictures; 
function setPictures() { 
    var img = document.getElementById("pictureBox"); 
     img.onmouseover = mouseOverImage; 
     img.onmouseout= mouseOutImage; 
} 
function mouseOverImage() { 
    var img = document.getElementById("myImg"); 
    img.style.opacity = .5; 
} 
function mouseOutImage() { 
    var img = document.getElementById("myImg"); 
    img.style.opacity = 1; 
} 

이 내가 그 작동하지 않는 시도 루프 기능입니다.

window.onload = setPictures; 
function setPictures() { 
    var img = document.getElementById("pictureBox"); 
    for (var i=0; i<img.length; i++) {  
     img[i].onmouseover = mouseOverImage; 
     img[i].onmouseout= mouseOutImage;} 
} 

여러분의 도움을 위해 미리 감사드립니다.

Answer 1

getElementById은 ID가 고유해야하므로 하나의 요소 만 반환합니다.

대신 각 요소에 클래스를 추가하고 클래스별로 선택하십시오. 콜백은 마우스 이벤트 this의 상황에 의존 할 수

가 말한 바와 같이

function mouseOverImage() { 
    this.style.opacity = .5; 
} 
function mouseOutImage() { 
    this.style.opacity = 1; 
} 

window.onload = function setPictures() { 
    var imageCollection = document.getElementsByClassName('pictureBox'); 
    for (var i=0; i < imageCollection.length; i++) {  
     imageCollection[i].onmouseover = mouseOverImage; 
     imageCollection[i].onmouseout = mouseOutImage; 
    } 
} 

Answer 2

는 단 하나의 요소를 반환에서 getElementById.
다음은 당신을 도울 수 있습니다 :

window.onload = setPictures; 
    function setPictures() { 
     var img = document.getElementById("pictureBox0"); 
     for (var i=1; img != null; i++) {  
      img.onmouseover = mouseOverImage; 
      img.onmouseout= mouseOutImage; 
      img = document.getElementById("pictureBox"+i); 
     } 
    }