如何实现数字>0变绿、<0变红、=0变黑？解决代码颜色逻辑异常

你的代码直接用valueHolder.innerText做数值比较，但innerText返回的是字符串类型，JavaScript的隐式类型转换可能导致判断逻辑异常（比如字符串形式的负数和数字0比较时，结果不符合预期），这就是颜色规则不生效的核心原因。

先把innerText显式转换为数字类型，修改数值后再赋值回元素，然后基于数字值判断颜色，逻辑会更可靠：

const valueHolder = document.getElementById("value");
const decreaseBtn = document.getElementById("decrease");
const increaseBtn = document.getElementById("increase"); // 补充获取increase按钮元素

increaseBtn.addEventListener("click", increaseNumber);

function increaseNumber(){
   // 将文本内容转为数字
   let currentValue = Number(valueHolder.innerText);
   currentValue++;
   // 更新元素显示的数值
   valueHolder.innerText = currentValue;
   // 根据数字值设置颜色
   if(currentValue > 0){
      valueHolder.style.color = "green";
   }else if(currentValue < 0){
      valueHolder.style.color = "red";
   }else{
      valueHolder.style.color = "black";
   }
}

如果需要给decrease按钮也绑定逻辑，写法类似：

decreaseBtn.addEventListener("click", decreaseNumber);

function decreaseNumber(){
   let currentValue = Number(valueHolder.innerText);
   currentValue--;
   valueHolder.innerText = currentValue;
   if(currentValue > 0){
      valueHolder.style.color = "green";
   }else if(currentValue < 0){
      valueHolder.style.color = "red";
   }else{
      valueHolder.style.color = "black";
   }
}

内容的提问来源于stack exchange，提问作者Spartan-Programmer