JS Image onClick src problems

Question

First post here.

So I am pretty good with my HTML and PHP, but fail at JS. I am trying to make a simple toggle using images.

HTML:

<img src="clear.png" id="imgClickAndChange" onclick="changeImage()">

JS:

<script language="javascript">
function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "clear.jpg") 
    {
        document.getElementById("imgClickAndChange").src = "full.jpg";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "clear.jpg";
    }
}

This code does not work as the script is receiving the src as its full path and not just "clear.jpg". Not a clue how to get around this. I've tried using substr, that didn't work. I wouldn't mind using the full path but the location could be relative on my server.

Rhys

manraj82 · Accepted Answer · 2013-07-07 09:25:57Z

1

var imgClickAndChange = document.getElementById("imgClickAndChange");

if (imgClickAndChange.src.indexOf("clear.jpg") !== -1){
 imgClickAndChange.src="full.jpg"
}else{
 imgClickAndChange.src="clear.jpg"
}

answered Jul 7, 2013 at 9:25

manraj82

6,40525 gold badges59 silver badges85 bronze badges

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

Comments

Divey · Accepted Answer · 2013-07-07 09:51:18Z

1

First off, you have clear.png in your html snippet, but are checking for clear.jpg in your javascript. After you get that cleared up...

You can use the getAttribute method to check for the "raw" contents of the attribute:

document.getElementById("imgClickAndChange").getAttribute('src'); // clear.png

Or you can use indexOf, as @manraj82 suggests, to check if "clear.jpg" exists in imgClickAndChange's src property:

document.getElementById("imgClickAndChange").src.indexOf("clear.jpg") // numeric index of "clear.jpg" or -1 if not found

answered Jul 7, 2013 at 9:51

Divey

1,7291 gold badge13 silver badges23 bronze badges

Comments

Quentin · Accepted Answer · 2013-07-07 09:18:50Z

0

Use a regular expression or split to get the section of the URL after the last / and compare that to the value you are testing against.

Alternatively, test with indexOf.

answered Jul 7, 2013 at 9:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Halil Ibrahim · Accepted Answer · 2013-07-07 10:14:53Z

0

You can inject a flag to HtmlElement to store the state.

var img = document.getElementById('toggle_img');

img.onclick = function()
{
    img.src = img.isOff ? 'on.png' : 'off.png';

    img.isOff = !img.isOff;
}

See it in action on jsfiddle

answered Jul 7, 2013 at 10:14

Halil Ibrahim

1,3691 gold badge21 silver badges39 bronze badges

Comments

David Thomas · Accepted Answer · 2013-07-07 10:20:34Z

I'd suggest the following:

function changeImage () {
    var img = document.getElementById('imgClickAndChange'),
        src = img.src;
    img.src = src.indexOf('clear') > -1 ? 'full.png' : 'clear.png';
}

JS Fiddle demo.

Or:

function changeImage() {
    var img = document.getElementById('imgClickAndChange'),
        src = img.src;

    img.src = src.replace(/(clear)|(full)/, function (a) {
        return a == 'clear' ? 'full' : 'clear';
    });
}

JS Fiddle demo.

To make it a little more easily-extensible (allowing you to pass in any img element, and using an arbitrary length of images/URLs to toggle between):

function changeImage(el) {
    var self = el,
        src = self.src,
        toggleBetween = self.getAttribute('data-images').split(',');
    for (var i = 0, len = toggleBetween.length; i < len;  i++) {
        if (src.indexOf(toggleBetween[i]) > -1) {
            self.src = (i + 1 == len ? toggleBetween[0] : toggleBetween[i + 1]) + '.png';
        }
    }
}

Using the HTML:

<img src="clear.png" id="imgClickAndChange" data-images="clear,full,arbitrary,other,images" onclick="changeImage(this)" />

JS Fiddle demo.

And, finally, to remove the onclick event-handler, binding the event-handling in the script, rather than in the element itself to reduce the use of obtrusive (and difficult to maintain) JavaScript:

function changeImage(el) {
    var self = this,
        src = self.src,
        toggleBetween = self.getAttribute('data-images').split(',');
    for (var i = 0, len = toggleBetween.length; i < len;  i++) {
        if (src.indexOf(toggleBetween[i]) > -1) {
            self.src = (i + 1 == len ? toggleBetween[0] : toggleBetween[i + 1]) + '.png';
        }
    }
}

var elem = document.getElementById('imgClickAndChange');
elem.addEventListener('click', changeImage);

<img src="clear.png" id="imgClickAndChange" data-images="clear,full,arbitrary,other,images" />

JS Fiddle demo.

References:

Collectives™ on Stack Overflow

JS Image onClick src problems

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

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

Related