JavaScript中If else逻辑异常：按钮切换图片无法正常回退

你的代码有两个关键问题导致无法正常切换回原图片：

• 错误使用赋值运算符代替比较运算符：if条件里的photo.src = "images/play.png"是赋值操作，不是比较判断。这个表达式每次都会把images/play.png赋值给图片src，并且返回这个字符串（永远为真），所以每次点击都会执行if块的代码，把图片设为pause.png，永远进不了else分支。

• photo.src返回完整绝对路径：浏览器会自动把相对路径转换成完整的URL（比如http://你的域名/images/play.png），直接和相对路径images/play.png比较永远不相等，就算改了比较运算符也会判断错误。

修复方案1：用getAttribute获取相对路径比较 #

把判断条件改成用getAttribute('src')获取原始的相对路径，同时把=换成===（严格相等比较）：

function change(){
    if(photo.getAttribute('src') === "images/play.png"){
        photo.src = "images/pause.png"
    } else {
        photo.src = "images/play.png"
    }
}

修复方案2：用状态变量记录状态（更推荐） #

避免依赖图片路径判断，用一个变量记录当前是播放还是暂停状态，逻辑更清晰可靠：

var btn, photo;
var isPlaying = true; // 初始对应play.png
function initButton(){
    btn=document.getElementById("btn");
    photo = document.getElementById("photo");
    btn.addEventListener("click", change);
    function change(){
        if(isPlaying){
            photo.src = "images/pause.png";
            isPlaying = false;
        } else {
            photo.src = "images/play.png";
            isPlaying = true;
        }
    }
}
window.addEventListener("load", initButton);

这个方案的好处是不用关心图片路径的变化，后续如果要修改按钮文字（比如切换成“暂停”/“播放”）也更容易扩展。

内容的提问来源于stack exchange，提问作者Naxus