JS计数器文本颜色无法切换求助：需正负值对应红绿颜色

你的代码功能正常但颜色不生效的原因很明确：你在updateColor函数中修改了错误元素的样式。

看你的代码：

• 计数器数值显示在id为counting的<span>里（通过counting.innerHTML = ++counter更新）
• 但updateColor函数却在修改id为value的<span>的颜色，这个元素里的内容是固定的"some value here"，和计数器数值无关，所以你看不到颜色变化。

修正后的代码 #

JavaScript 部分 #

let counting = document.getElementById("counting");
let increaseBtn = document.getElementById("increase-btn");
let decreaseBtn = document.getElementById("decrease-btn");
let resetBtn = document.getElementById("reset-btn");
let counter = 0;

// 初始调用一次，确保0的颜色正确
updateColor();

increaseBtn.addEventListener("click", ()=>{
    counting.innerHTML = ++counter;
    updateColor();
});
decreaseBtn.addEventListener("click", ()=>{
    counting.innerHTML = --counter;
    updateColor();
});
resetBtn.addEventListener("click", ()=>{
    counting.innerHTML = counter = 0;
    updateColor();
});

function updateColor(){
    if(counter > 0){
        counting.style.color = "green";
    }
    else if(counter < 0){
        counting.style.color = "red";
    }
    else {
        counting.style.color = "black";
    }
}

HTML 部分 #

<div>Counter: <span id="counting"></span></div>
<input type="button" id="increase-btn" value="+">
<input type="button" id="decrease-btn" value="-">
<input type="button" id="reset-btn" value="Reset">
<div>Value: <span id="value">some value here</span></div>

额外优化提示 #

• 可以把变量名counting改成counterDisplay，语义更清晰，避免和counter变量混淆
• 初始调用updateColor()，确保页面加载时0的颜色默认显示为黑色

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