如何用JavaScript修改img的src属性？音频开关二次点击无响应求解

问题原因 #

• 核心错误1：if判断条件中误用赋值运算符= 替代了全等比较运算符===。=会直接修改src属性的值，且赋值表达式的返回值恒为被赋予的真值，所以每次执行函数都会命中第一个分支，永远无法进入else if逻辑。
• 错误2：直接读取audioState.src得到的是浏览器解析后的完整绝对路径（比如https://你的站点地址/images/musicOff.svg），和你写的相对路径字符串永远匹配不上，就算用了比较运算符也会判断失败。

修正方案 #

推荐两种改法，第二种对新手更友好，不容易出路径匹配问题：

方案1：修正判断逻辑，读取原始属性值 #

用getAttribute('src')拿到HTML标签中写的原始相对路径，同时把赋值和比较运算符区分开：

var musicFile = new Audio('audio/Ice.mp3');
var audioState = document.getElementById('musicIcon');

function music() {
    // 拿原始的src属性值做比较，用===做相等判断
    if (audioState.getAttribute('src') === 'images/musicOff.svg') {
        musicFile.play();
        audioState.src = 'images/musicOn.svg';
    } else {
        musicFile.pause();
        musicFile.currentTime = 0;
        audioState.src = 'images/musicOff.svg';
    }
}

方案2：用独立变量存储播放状态（更稳妥） #

不用依赖DOM属性判断状态，单独维护一个变量记录当前是否在播放，逻辑更清晰：

var musicFile = new Audio('audio/Ice.mp3');
var audioState = document.getElementById('musicIcon');
var isPlaying = false; // 单独存播放状态

function music() {
    if (!isPlaying) {
        musicFile.play();
        audioState.src = 'images/musicOn.svg';
        isPlaying = true;
    } else {
        musicFile.pause();
        musicFile.currentTime = 0;
        audioState.src = 'images/musicOff.svg';
        isPlaying = false;
    }
}

新手学习建议 #

• 写判断条件前先确认运算符：=是赋值，==是自动类型转换的相等比较，===是严格相等比较，判断逻辑里优先用===
• 涉及DOM属性读取时，可以先用console.log(你要读取的变量)打印值到控制台，确认实际拿到的内容和你预期的是否一致，是调试最常用的手段
• 状态判断优先用独立的JS变量存储，不要依赖DOM上的属性值做判断，减少DOM操作也能提升性能，逻辑也更不容易混乱

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