How to set Attribute value for a class with multiple items

Question

This might be quiet simple though, but I am just some few months old in web development and i got dead stuck here. I have a page with multiple image items set to one class. By this, I meant the following code

<img src="http://img1.gif" id="GA2" class="CHAngeR" />    
<img src="http://img1.gif" id="GA2" class="CHAngeR" />

and i want to execute a function that edits/appends the "src" attribute of the images at ones.

I tried using the same Id, but i discovered that w3c speculations are contrary, i also tried the following code but still doesn't work, how can i do this.

 <!DOCTYPE html>
    <html>
       <head>
          <title>DOWNLOAD PAGE</title>
          <input type="button" value="change image" id="iMgChAnGe" onclick="changeIMG()"/>
          <div class="changer">
               <img src="http://img1.gif" id="GA1" class="CHAngeR" />
               <img src="http://img2.gif" id="GA2" class="CHAngeR" />
               <img src="http://img3.gif" id="GA3" class="CHAngeR" />
               <img src="http://img4.gif" id="GA4" class="CHAngeR" />
               <img src="http://imgl.gif" id="GA5" class="CHAngeR" />
          </div>
          <script>
             function ChangeIMG(){
                 document.getElementByClassName(CHAngeR).setAttribute("src","http://google.com/img/images/static.gif");
             } 
          </script>
      </head>
</html>

Your question is a mess. You need to clean it up and format it properly. Also: it's JavaScript, not Java. Those are two different languages — Sean Patrick Floyd, Dec 11 '12 at 10:59
Welcome to Stack Overflow. You can format source code with the `{}` toolbar button and see what the question looks like in the bottom live preview panel. Additionally, you can edit a question in order to improve it. It'd normally have re-formatted the question for you, but all your code is in one line... — Álvaro González, Dec 11 '12 at 11:06

score 1 · Answer 1 · answered Dec 11 '12 at 11:06

1

Loop through the images manually...

var imgs = document.getElementsByClassName("...");
for (var i = 0; i < imgs.length; i++)
    imgs[i].src = ...;

or use jQuery:

$(".class").attr("src", ...);

answered Dec 11 '12 at 11:06

Wutz

2,246
13
15

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

I don't think getElementsByClassName is supported by all browsers (IE). That being said, I recommend using a JQuery solution.

Go here if you can use JQuery.

Go here if for some reason you don't want to use JQuery.

edited May 23 '17 at 12:12

Community

1
1

answered Dec 11 '12 at 11:12

tenky

29
3

How to set Attribute value for a class with multiple items

2 Answers2