How to check img src is true using javascript

Question

There are 5 no. of buttons(images). Initially all are off image. Only 1 may be on at a time. So when i press any button that img's src changes to on.png. Then when I press any of those on or off buttons, the pressed button source img changes to on.png and all other on img also change to off.png.

The html code is,

    <table cellspacing="0" style="padding:0%; margin:0% auto;">
<tr><td><img id="img1" src="off.png" height="30" width="30" onclick="off(this.id);" /></td><td>45:78</td></tr>
<tr><td><img id="img2" src="off.png" height="30" width="30" onclick="off(this.id);" /></td><td>45:78</td></tr>
<tr><td><img id="img3" src="off.png" height="30" width="30" onclick="off(this.id);" /></td><td>45:78</td></tr>
<tr><td><img id="img4" src="off.png" height="30" width="30" onclick="off(this.id);" /></td><td>45:78</td></tr>
<tr><td><img id="img5" src="off.png" height="30" width="30" onclick="off(this.id);" /></td><td>45:78</td></tr>
</table>

The javascript code is,

    function off(a)
{
    var images = document.getElementsByTagName('img');
    for(var i = 0; i < images.length; i++)
    {
        var img = images[i];
        alert(img.src);
        if(img.src == 'on.png')
        {
            img.src = 'off.png';
        }
    }
    document.getElementById(a).src='on.png';
}

The if() condition is not working, Please provide solution and explain why its not

working. Thank you!

I'd suggest adding a class, and checking that instead of the src. — gen_Eric
– gen_Eric, Commented Aug 9, 2013 at 14:30

retnuh · Accepted Answer · 2013-08-09 14:34:26Z

10

img.src will return the full path of the image (/full/path/to/on.png) rather than what the src attribute is set to in the markup (on.png). Instead use:

if (img.getAttribute('src') === 'on.png')

answered Aug 9, 2013 at 14:34

retnuh

6003 gold badges6 silver badges16 bronze badges

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

1 Comment

retnuh Over a year ago

img.src holds the full value of the image so something like: mysite.com/images/on.png which is not 'on.png'.

Aegis · Accepted Answer · 2013-08-09 14:30:25Z

2

What is the alert(img.src); showing? If I try on stackoverflow something like:

images[0].src = 'on.png';

images[0].src == "http://stackoverflow.com/questions/18149043/on.png", not "on.png" (it's relative to the current page).

answered Aug 9, 2013 at 14:30

Aegis

1,78911 silver badges13 bronze badges

2 Comments

Aegis Over a year ago

@deveshchauhan27 yep but is the source 'one.png' or a full path (i.e. 'http://.../one.png')? Edit: retnuh got it

Devesh Chauhan Over a year ago

full path ../img/on.png

kalley · Accepted Answer · 2013-08-09 14:36:36Z

0

You can use match:

img.src.match('on.png')

Or with a regex (that makes sure it's at the end of the string):

img.src.match(/on\.png$/)

answered Aug 9, 2013 at 14:36

kalley

18.5k2 gold badges41 silver badges37 bronze badges

Comments

Hovsep · Accepted Answer · 2014-01-22 12:43:55Z

0

You have described a behavior of radiogroup. You do not need to implement it, it is not a good practice to implement standard elements. Why you do not use something like this:

<radiogroup class="custom-radio">
    <input type="radio" name="myRadio" value="1">
    <input type="radio" name="myRadio" value="2">
    <input type="radio" name="myRadio" value="3">
    <input type="radio" name="myRadio" value="4">
    <input type="radio" name="myRadio" value="5">
</radiogroup>

You can customize radiobuttons how you want, and it will work without javascript.

answered Jan 22, 2014 at 12:43

Hovsep

3971 gold badge4 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to check img src is true using javascript

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related