如何在JavaScript中根据计数器数值动态切换文本颜色？

问题出在你的颜色判断逻辑仅在页面初始加载时执行了一次，后续点击按钮修改计数器数值后，没有重新触发颜色判断，导致颜色无法动态更新。

你可以把颜色判断的逻辑封装成一个独立函数，然后在初始化时以及每次修改计数器数值后调用这个函数，就能实现动态更新颜色的效果：

const addBtn = document.getElementById(`add`);
const resetBtn = document.getElementById(`reset`);
const minusBtn = document.getElementById(`minus`);

const counter = document.getElementById(`counter`);

// 封装颜色更新逻辑为独立函数
function updateCounterColor() {
    const count = Number(counter.innerHTML);
    // 先移除所有可能的颜色类，避免类叠加冲突
    counter.classList.remove(`white`, `green`, `red`);
    
    if (count > 0) {
        counter.classList.add(`green`);
    } else if (count < 0) {
        counter.classList.add(`red`);
    } else {
        // 数值为0时恢复白色样式
        counter.classList.add(`white`);
    }
}

// 初始化时执行一次，处理初始状态
updateCounterColor();

addBtn.addEventListener(`click`, () => {
    counter.innerHTML = Number(counter.innerHTML) + 1;
    // 更新数值后调用颜色更新函数
    updateCounterColor();
});

minusBtn.addEventListener(`click`, () => {
    counter.innerHTML = Number(counter.innerHTML) - 1;
    // 更新数值后调用颜色更新函数
    updateCounterColor();
});

resetBtn.addEventListener(`click`, () => {
    counter.innerHTML = 0;
    // 更新数值后调用颜色更新函数
    updateCounterColor();
});

关键改动说明： #

• 把颜色判断逻辑抽成updateCounterColor函数，便于重复调用
• 每次修改计数器数值后，立即调用该函数重新判断颜色
• 在函数里先移除所有颜色类，避免多个颜色类同时存在导致样式冲突
• 补充了数值为0时的处理逻辑，恢复白色样式（匹配初始状态的需求）
• 修正了minusBtn事件里的隐式类型转换问题，显式用Number()转换后再运算，避免出现字符串拼接类的异常

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