Changing the 'src' attribute of an image using javascript

Question

I'm using javascript, so that when a refresh button is clicked it begins to spin around until the refresh is completed. This is my function:

function RefreshHome() {

// Refreshes the home page via the image link.

// Make the refresh link animate.
var refresh = document.getElementById("refresh_button");
refresh.src = "images/refresh_animated.gif";

// Refresh the page.
window.location = "home.aspx";

return false;
}

This worked perfectly for a while then, as far as I can see, inexplicably stopped working! When the refresh button is clicked on now, the image just disappears.

Does anybody know why this might happen?

Aram Kocharyan · Accepted Answer · 2012-03-15 09:25:43Z

1

Just want to mention that this would be much easier in jQuery. You wouldn't need to worry so much about maintaining browser compatibility etc. either. As your project grows your code may become unwieldily, so even if you don't decide to use jQuery you should find a suitable framework for your needs.

var refresh = $("#refresh_button");
refresh.attr("src", "images/refresh_animated.gif");

Also be aware that an image that has no src shows up with a placeholder X on most browsers, and you can hide it with display:none; or using the refresh.hide() and refresh.show() methods in jQuery as needed.

answered Mar 15, 2012 at 9:25

Aram Kocharyan

20.5k11 gold badges84 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shauneba Over a year ago

Thanks - at the time of writing that function the site wasn't using jQuery, but we've since added it, and finding it great, old habits just die hard I suppose and I keep writing document.getElementById without thinking!

Aram Kocharyan Over a year ago

I had an aversion to learning it because I didn't see the point, but it's very useful and dead easy if you're comfortable with pure js

shauneba Over a year ago

Also - it doesn't show up with an X as before it's clicked, the src attribute is "images/refresh_stationary.png"

Aram Kocharyan Over a year ago

ah great, that'll work great too. I also found addClass and removeClass useful for adding styling cleanly to elements.

Collectives™ on Stack Overflow

Changing the 'src' attribute of an image using javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related