Checking image name using javascript

Question

I'm changing the img src on click using javascript.

I'm trying to determine whether to switch on or off.

I'm testing the following:

var img_el = document.getElementById("on_off_img");
if ( img_el.src == 'img/on.png' ) {

  img_el.src = 'img/off.png'
} else {

  img_el.src = 'img/on.png'
}

My problem is that i never get a match - it looks like img_el.src returns the full URL... Is there a function to just test the actual filename instead of the full string to the file?

Or is there a better way to manage the click?

Chris Marais · Accepted Answer · 2011-04-09 07:25:53Z

5

use indexOf() instead of comparing the src

e.g

var img_el = document.getElementById("on_off_img");
if ( img_el.src.indexOf('on.png') > -1) {
  img_el.src = 'img/off.png'
} else {

  img_el.src = 'img/on.png'
}

answered Apr 9, 2011 at 7:25

Chris Marais

4112 silver badges10 bronze badges

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

Comments

tcooc · Accepted Answer · 2011-04-09 07:26:38Z

2

Yuo can always use indexOf:

if(img_el.src.indexOf('img/on.png') > -1){
  img_el.src = 'img/off.png'
}else{
  img_el.src = 'img/on.png'
}

answered Apr 9, 2011 at 7:26

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:43:36Z

1

To shorten this even more, you can use a ternary operator:

var img_el = document.getElementById("on_off_img"),
    isOn   = img_el.src.indexOf('on.png')>-1;
img_el.src = isOn ? 'img/off.png' : 'img/on.png';

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Apr 9, 2011 at 7:52

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Comments

Ganga Raju K · Accepted Answer · 2013-09-01 13:33:40Z

1

You can use match statement aswell.

var img_el = document.getElementById("on_off_img");
if ( img_el.src.match("on.png")) 
{
  img_el.src = 'img/off.png'
} else 
{
  img_el.src = 'img/on.png'
}

answered Sep 1, 2013 at 13:33

Ganga Raju K

111 bronze badge

Comments

Sukhjeevan · Accepted Answer · 2011-04-09 07:58:59Z

0

Try using JQuery:

$("#on_off_img").click(function(){
    if($(this)[0].nameProp == "on.png")
        $(this).attr("src","img/off.png");
    else
        $(this).attr("src","img/on.png");         
});

answered Apr 9, 2011 at 7:58

Sukhjeevan

3,15410 gold badges53 silver badges93 bronze badges

Collectives™ on Stack Overflow

Checking image name 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