Изображение не отображается после изменения атрибута src

#javascript #html #javascript-events

#javascript #HTML #dom-события

Вопрос:

Как говорится в названии, после того, как я изменил значение src на значение во время rollEvent функции, изображение не меняется. Когда я печатаю значение display.src для консоли, оно правильное. Но фактический документ не изменяет src значение для img тега с классом display_box . Я что-то здесь упускаю?

jsfiddle.net/bNL5C/3/

 window.onload = function eventsLoad (elem, display) {
    elem = document.getElementsByClassName('images');
    display = document.getElementsByClassName('display_box');
    function rollEvent(e) {
        var sourceURL = this.src;
        console.log(sourceURL);
        display.src = sourceURL;
        console.log(display.src);
    };
    console.log(elem);
    console.log(display);
    for (var i = 0; i < elem.length; i  ) {
        elem[i].addEventListener('mouseover', rollEvent, false);
        console.log('Added event listener to '   elem[i]);
    };
}
  

Ответ №1:

getElementsByClassName возвращает список узлов, поэтому вам следует изменить display.src = sourceURL :

 function rollEvent(e) {
    var sourceURL = this.src;
    display[0].src = sourceURL; // <--- change here
    console.log(display.src);
};
  

Демонстрация: http://jsfiddle.net/bNL5C/4 /

или используйте display = document.querySelector('.display_box'); вместо этого.

Комментарии:

1. Так просто! Спасибо, полностью пропустил это.

Ответ №2:

Попробуйте это… Изменить:

 document.getElementsByClassName returns an array - display is a list. Try changing
    display.src = sourceURL;
  

Для:

 display[0].src = sourceURL;