Change image onLoad() - Where is my failure?

Question

I want to change a image after my page is loaded. I wrote a Java Script file but I don't know where my error is.. I also don't get an error in the console...

JavaScript:

function changeImage(){ changeImage = document.getElementsByClass("carousel-indicators"); changeImage = changeImage.getElementsByTagName("img")[0].src; actualImage = document.getElementsByClass("item active"); actualImage = actualImage.getElementsByClass("img-wrapper-inner"); actualImage.getElementsByTagName("img").src = changeImage; }

I also call the function with:

<img onload="changeImage()">

Greetings and Thank You!

For one thing, it's document.getElementsByClassName, not getElementsByClass — qxz
– qxz, Commented Feb 27, 2017 at 20:30
I'm guessing that your changeImage function isn't being called. If you put a console.log in it, does it show up in the console? — qxz
– qxz, Commented Feb 27, 2017 at 20:31
@qxz means that the method Document.getElementsByClass does not exist. You can find the documentation on Document.getElementsByClassName on mdn: developer.mozilla.org/en/docs/Web/API/Document/… — Maarten Bicknese
– Maarten Bicknese, Commented Feb 27, 2017 at 20:33
I just typed into my changeImage() function now alert("Worked!"); - But I do not get a alert... So at least my function isn't called... But why? I say <img onload="changeImage()"> — Jan
– Jan, Commented Feb 27, 2017 at 20:35

Maarten Bicknese · Accepted Answer · 2017-02-27 20:50:23Z

As qxz pointed out you're probably looking for the Document.getElementsByClassName method.

Furthermore using the same variable name as your method name and not using var to declare new variable may lead to unexpected results. As JavaScript has no problem in overriding your scope.

Last but not least, getElementsByClassName returns an array. Not a single HTMLElement. You should retrieve an element from the array to manipulate. Instead of trying to change the src field of the array.

So combining these items would give you some code like:

function handleImageLoad() { var loadedImage = document.getElementsByClassName('loadableImage')[0].src; document .getElementsByClassName('loadState')[0] .innerHTML = 'Loaded image: ' + loadedImage; }

<img class="loadableImage" src="http://lorempixel.com/200/200" onload="handleImageLoad()" /> <p class="loadState">Loading...</p>

Collectives™ on Stack Overflow

Change image onLoad() - Where is my failure?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related