实现笑脸/哭脸图片与按钮文本同步切换功能失效求助

错误原因 #

你的代码里if判断使用了赋值运算符=而非比较运算符，导致每次点击按钮时都会执行if块的逻辑，永远触发不了else分支。btn.value="Frown"是把字符串"Frown"赋值给按钮的value属性，这个表达式的返回值是"Frown"，会被当作true处理，所以永远只会切换到哭脸和"Smile"按钮文本，无法切回去。

修正后的代码 #

<html>
<body>
    <img id="myImage" src="smile.png">
    <input type="button" id="btn" value="Frown">
</body>

<script>
    const pic = document.getElementById('myImage')
    const btn = document.getElementById("btn")
    btn.addEventListener("click", ()=>{
        if (btn.value === "Frown") { // 改用严格相等比较运算符===
                pic.src="frown.png"
                btn.value="Smile"
            } else {
                pic.src="smile.png"
                btn.value="Frown"
            }
    })
</script>
</html>

额外优化点 #

• 给pic变量加上const声明，避免创建全局变量，符合现代JS规范。
• 使用**严格相等===**代替松散相等==，避免类型转换带来的潜在问题，代码更严谨。

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