在javascript中的图像之间切换

Question

I'm trying to make a button, which toggles between 2 images, but I failed to.

This is my HTML:

<img id="down" src="down.png">
<FORM>
<INPUT TYPE="button" VALUE="Pump" onclick="myFunction()" >
</FORM>

And this is the JavaScript:

function myFunction()
{
    if( document.getElementById("down").src == "down.png"){
        document.getElementById("down").src = "1.png";
    }
    else if( document.getElementById("down").src == "1.png" ){
        document.getElementById("down").src = "down.png";
    }
}

How can I fix it?

Answer 1

The problem here is you are comparing just image name where your document.getElementById("down").src gives you whole path including domain.

You need to fetch image name from the src

function myFunction()
{
    var source = document.getElementById("down").src; // get source
    var imgName = source.substring(source.lastIndexOf('/') + 1); // fetch image name

    if(imgName == "down.png"){ //check image name
        document.getElementById("down").src = "1.png";
    }
    else if(imgName == "1.png" ){
        document.getElementById("down").src = "down.png";
    }
}

Demo