Change from getElementById to getElementsByClassName

Question

Hi i got a script like this:

$(".news-button").click(function(){
    var img = document.getElementById('news-image').src;
    if (img.indexOf('news-bt-1.png')!=-1) {
        document.getElementById('news-image').src  = 'img/news-bt-2.png';
    }
    else {
        document.getElementById('news-image').src = 'img/news-bt-1.png';
    }

});

It worked fine but now i want to change news-image from id to class so how to change the code above?

@Lucifer i suggested you to use jquery instead of javascript inside the click function because it would reduce the cross platform risk. Check my answer :-) — squiroid, Mar 14 '15 at 07:09

score 1 · Answer 1 · answered Mar 14 '15 at 06:56

1

You can use getElementsByClassName instead getElementById

answered Mar 14 '15 at 06:56

CodeWithCoffee

1,896
2
14
36

1

I did but the script doesn't work – Lee Mar 14 '15 at 06:59

squiroid · Answer 2 · 2015-03-14T07:07:44.620

Use :-

document.getElementsByClassName('news-image')[0].src

Since getElementsByClassName returns array you need to use index of it.

But as i can see you are using jquery on click event then why you are using javascript inside it instead use jquery inside it will help you in cross-platform

$(".news-image").each( function() {
   var img= $(this).attr('src');
 if (img.indexOf('news-bt-1.png')!=-1) {
           $(this).attr('src','img/news-bt-2.png') 
  }else{
  $(this).attr('src','img/news-bt-1.png') 
  }

});

score 0 · Answer 3 · answered Mar 14 '15 at 06:59

0

You can use

var elements = document.getElementsByClassName(classname)

It will get you all the elements matched as an array. So first make sure you got the array, then access the elements like elements[index]

answered Mar 14 '15 at 06:59

Johnnie Zhang

183
6

Marco Bonelli · Accepted Answer · 2015-03-14T07:05:57.447

You can use getElementsByClassName and select the first element, because this method returns a list of Elements which is ordered by the position of the elements in the DOM.

So, given that the element you want to get is the first one that appears in your HTML code with that class, you can do:

document.getElementsByClassName("news-image")[0]

And if it isn't the first one, you can change the number and select another element:

document.getElementsByClassName("news-image")[2] // third element

You can also use querySelector to select the first element that matches the given CSS selector, which is, in my opinion, easier:

document.querySelector("img.news-image")

Finally, since I see you're using jQuery as well, you can use it's selector like this:

$("img.news-image")[0]

Talking about your specific code, here's the solution you were looking for:

$(".news-button").click(function(){
    var img = $('img.news-image')[0];
    if (img.src.indexOf('news-bt-1.png')!=-1) {
        img.src  = 'img/news-bt-2.png';
    }
    else {
        img.src = 'img/news-bt-1.png';
    }
});

@LuciferLee you're welcome. If my answer solved your question, I suggest you to mark it as correct so that future users with the same problem will find it easily. — Marco Bonelli, Mar 14 '15 at 07:32

Vikrant · Answer 5 · 2015-03-14T07:08:12.670

0

Use the below code, just Replace className with the actual class name of you tag img :

$(".news-button").click(function () {
        var img = document.getElementById('news-image').src;
        var img1 = document.getElementsByClassName("className");
        if (img.indexOf('news-bt-1.png') != -1) {
            img1.src = 'img/news-bt-2.png';
        }
        else {
            img1.src = 'img/news-bt-1.png';
        }

    });

edited Mar 14 '15 at 07:08

answered Mar 14 '15 at 07:01

Vikrant

4,920
17
48
72

hey @LuciferLee, here is full code wht u hv asked for! – Vikrant Mar 14 '15 at 07:03

Yigit Yuksel · Answer 6 · 2015-03-14T07:15:26.887

0

You can use Jquery as well.

To get source of image:

$('.classname').attr('src')

edited Mar 14 '15 at 07:15

answered Mar 14 '15 at 07:04

Yigit Yuksel

1,060
2
18
35

Change from getElementById to getElementsByClassName

6 Answers6