replacing all images from a class with another image using Javascript

Question

I'm using an external script on my website with a form. Some of the css is customizable, but I can't change images for example. I would like to replace the small image displayed when a field is not completed by an other one using Javascript.

This is the HTML code with the original image :

<img class="incorrect-img" count="1" src="http://www.detailsdetails.eu/images/newimg/incorrect.gif"></img>

I'm trying with this Js code but it's not working...

$(document).ready(function () {

document.getElementsByClassName("incorrect-img").src="MYIMAGE.gif";

});

Does anyone know what I'm doing wrong? Maybe it's because I'm trying to change an image from a class, maybe it only works with ID ? I can't change the class by ID...

If you have jQuery which $(document).ready() looks like, then this is easier with jQuery. — jfriend00
– jfriend00, Commented Feb 14, 2014 at 15:49

Halcyon · Accepted Answer · 2014-02-14 16:18:23Z

3

document.getElementsByClassName("incorrect-img") returns an HTMLcollection which is like an array but not quite.

Luckily you can loop over it like you would with an array:

var elems = document.getElementsByClassName("incorrect-img");
for (var i = 0; i < elems.length; i+= 1) {
    elems[i].src = "MYIMAGE.gif";
}

edited Feb 14, 2014 at 16:18

answered Feb 14, 2014 at 15:49

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

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

Comments

Spaceknight · Accepted Answer · 2014-02-14 15:53:21Z

3

If you want to use jQuery

$(document).ready(function () {
    $( ".incorrect-img" ).each(function( index ) {
        $(this).attr('src', 'MYIMAGE.gif');
    });
});

answered Feb 14, 2014 at 15:53

Spaceknight

314 bronze badges

Comments

Patrick Moore · Accepted Answer · 2014-02-14 15:49:31Z

1

Since you're already using jQuery, instead of:

document.getElementsByClassName("incorrect-img").src="MYIMAGE.gif";

You can use:

$(".incorrect-img").attr("src", "MYIMAGE.gif");

answered Feb 14, 2014 at 15:49

Patrick Moore

13.4k5 gold badges41 silver badges63 bronze badges

Comments

Suman Bogati · Accepted Answer · 2014-02-14 15:52:35Z

0

document.getElementsByClassName() returns the elements of array which are matched with class selector, In your case there is only one image so 0 index would be fine for access the first element. like this

document.getElementsByClassName("incorrect-img")[0].src="MYIMAGE.gif";

For inormationa about `getElementsByClassName()

edited Feb 14, 2014 at 15:52

answered Feb 14, 2014 at 15:47

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

Comments

mmdwc · Accepted Answer · 2014-02-14 16:10:56Z

0

thanks a lot. I combined your answers. here is my final code :

$(window).load(function() {

var image = $(".incorrect-img");
for (var i = 0; i < image.length; i++) {
image[i].src="incorrect_2.gif";
}

});

answered Feb 14, 2014 at 16:10

mmdwc

1,1576 gold badges28 silver badges58 bronze badges

Collectives™ on Stack Overflow

replacing all images from a class with another image using Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related