javascript - 在 JavaScript 中切换图像

Question

我正在尝试制作一个按钮，在两个图像之间切换，但我失败了。

这是我的 HTML:

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

这是 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";
    }
}

如何修复它？

Answer 1

这里的问题是您只比较图像名称，而您的 document.getElementById("down").src 为您提供了包括域在内的整个路径。

您需要从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