CODEWITHSUNDEEP
javascripthtmldom-events
jFasaJr
jFasaJr

Reputation: 487

Image doesn't display after changing src attribute

Like the title says after I change the src to the value during the rollEvent function, the image doesn't change. When I print the value of display.src to console it is correct. But the actual document doesn't change the src value for the img tag with the class of display_box. Am I missing something here?

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

Upvotes: 3

Views: 1443

Answers (2)

rob
rob

Reputation: 1286

Try this... Change:

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

To:

display[0].src = sourceURL;

Upvotes: 0

dfsq
dfsq

Reputation: 193261

getElementsByClassName returns NodeList, so you should change display.src = sourceURL:

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

Demo: http://jsfiddle.net/bNL5C/4/

or use display = document.querySelector('.display_box'); instead.

Upvotes: 1

Related Questions