Javascript Loop для вызова функции

Question

Пытается выяснить, на что он способен, onmouseout и onclick с несколькими картинками, все из которых имеют одинаковый тег ID. Для этого я понимаю, что мне нужен цикл .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 возвращает только один элемент, поскольку идентификаторы должны быть уникальными.

Вместо этого добавьте класс к каждому элементу и выберите его по классу. Callbacks может опираться на контекст this «s для событий мыши:

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); 
     } 
    }