通过onclick问题javascript切换图像

Question

我试图通过onclick函数在文件夹中的两个图像之间切换。 目前，我的代码无法切换图片，并且没有任何控制台错误，因此我不知道为什么没有进行切换。 我的文件夹如下所示：

program-01
    program01.index
    program01javascript
        program01script.js
    program01css
    images
        LightOff.png
        LightOn.png

的HTML

<div>
    <img src="images/LightOff.png" id="light" onclick="DateTime(); imageSwap();" />
    <p id="date_time"></p>
</div>

Java脚本

function imageSwap(){
    var img = document.getElementById("light") ;
    if (img.src == "images/LightOff.png"){
        img.src = "images/LightOn.png";
    } else {
        img.src = "images/LightOff.png";
    }
}

我相信它与我的文件路径有关，或者与.src属性有关，但是不确定到底是什么问题。

Answer 1

这个怎么样 ？

img.src将返回绝对URL，建议您使用标志而不是图像src

var status = false;
function imageSwap() {
    var img = document.getElementById("light");
    if (!status) {
        img.src = "images/LightOn.png";
        status = true;
    } else {
        img.src = "images/LightOff.png";
        status = false;
    }
}

或按照自己的方式使用getAttribute

function imageSwap(){
    var img = document.getElementById("light") ;
    if (img.getAttribute('src') == "images/LightOff.png"){
        img.src = "images/LightOn.png";
    } else {
        img.src = "images/LightOff.png";
    }
}