为何这段JavaScript代码中的IF语句无法正常工作？

问题根源 #

你的if语句仅在页面加载时执行一次，此时count的初始值为0，颜色被设为#222。但点击按钮修改count后，这段判断逻辑并未重新运行，所以颜色不会随数值变化而更新。

修复方法 #

将颜色判断逻辑封装成独立函数，每次修改count后调用该函数，同时页面初始化时也调用一次以设置初始颜色。

修正后的代码 #

const value = document.getElementById("value")
const btnDecrease = document.querySelector(".decrease")
const btnReset = document.querySelector(".reset")
const btnIncrease = document.querySelector(".increase")

let count = 0

// 封装颜色更新逻辑
function updateCountStyle() {
    if (count > 0) {
        value.style.color = "green";
    } else if (count < 0) {
        value.style.color = "red";
    } else {
        value.style.color = "#222"
    }
}

// 初始化样式
updateCountStyle()

btnDecrease.addEventListener("click", function() {
    count--
    value.textContent = count
    updateCountStyle()
})

btnIncrease.addEventListener("click", function() {
    count++
    value.textContent = count
    updateCountStyle()
})

btnReset.addEventListener("click", function() {
    count = 0
    value.textContent = count
    updateCountStyle()
})

额外优化提示 #

• 可进一步合并文本更新与样式更新逻辑，减少重复代码，比如编写updateDisplay函数统一处理内容和样式。
• 颜色值建议使用小写格式（如green而非Green），保持代码风格一致性。

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