Javascript 简单的计数器将数字的颜色更改为红色（减少）绿色（增加），但不知何故，它努力使黑色为零

我刚刚经历了一些简单的js项目，不知怎的被困在这里了。 我有一个计数器，它有两个按钮，可以输入显示的值，也可以将显示的值减少一个

负值红色-正值绿色

零应该是黑色的

我已经考虑过在作用域之外创建另一个变量来跟踪计数，但它也不太管用

谢谢你的帮助

const counter = document.getElementById('counter');
const buttonDown = document.querySelector('.prevBtn');
const buttonUp = document.querySelector('.nextBtn');



buttonDown.addEventListener('click', function() {
  console.log(counter.textContent == 0);
  console.log('test')
  if (counter.textContent == 0) {
    counter.style.color = 'black';
  }
  counter.textContent--;
  if (counter.textContent < 0 ) {
    counter.style.color = 'red';
  } 
})

buttonUp.addEventListener('click', function() {
  
  if (counter.textContent == 0) {
    counter.style.color = 'orange';
  }
  counter.textContent++;
  if (counter.textContent > 0 )
  counter.style.color = 'green';


})

const counter=document.getElementById（'counter'）；
const buttonDown=document.querySelector（'.prevBtn'）；
const buttonUp=document.querySelector（'.nextBtn'）；
addEventListener（'click'，function（）{
console.log（counter.textContent==0）；
console.log（'test'）
如果（counter.textContent==0）{
counter.style.color='黑色'；
}
counter.textContent--；
如果（counter.textContent<0）{
counter.style.color='red'；
} 
})
buttonUp.addEventListener（'click'，function（）{
如果（counter.textContent==0）{
counter.style.color='橙色'；
}
counter.textContent++；
如果（counter.textContent>0）
counter.style.color='绿色'；
})

更改如下

   if (parseInt(counter.textContent) == 0) {

---

以下是更正后的代码：

const counter = document.getElementById('counter');
const buttonDown = document.querySelector('.prevBtn');
const buttonUp = document.querySelector('.nextBtn');

buttonDown.addEventListener('click', function() {
  var counterNumericValue = Number(counter.textContent);
  if(counterNumericValue == 0)
    counter.style.color = 'black';
  else {
    counterNumericValue--;
    counter.textContent = counterNumericValue;
    counter.style.color = 'red';
  } 
});

buttonUp.addEventListener('click', function() {
  var counterNumericValue = Number(counter.textContent);
  counterNumericValue++;
  counter.textContent = counterNumericValue;
  counter.style.color = 'green';
});

---

现在我了解了您的需要：

const counter = document.getElementById('counter');
const buttonDown = document.querySelector('.prevBtn');
const buttonUp = document.querySelector('.nextBtn');

function updateCounter(change) {
  var counterNumericValue = Number(counter.textContent)+change;
  counter.textContent = counterNumericValue;
  counter.style.color=(counterNumericValue>0)?"green":(counterNumericValue<0):"red":"black";
}

buttonDown.addEventListener('click', function() {
  updateCounter(-1);
});

buttonUp.addEventListener('click', function() {
  updateCounter(1);
});

const counter=document.getElementById（'counter'）；
const buttonDown=document.querySelector（'.prevBtn'）；
const buttonUp=document.querySelector（'.nextBtn'）；
函数更新计数器（更改）{
var counterNumericValue=数字（counter.textContent）+更改；
counter.textContent=计数器数值；
counter.style.color=（counterNumericValue>0）？“绿色”：（CounternumericValueConsole.logs的输出是什么？false比true更假…这意味着零不能被识别为数字，但下面/上面的所有内容都是该项目的github文件，包括解决方案橙色从何而来？！谢谢你的帮助Imoren。我在编辑器中粘贴了你的代码，但现在按下了向下按钮不低于零。它基本上在零处停止。降低计数时正值现在显示为红色。谢谢。您是否希望计数器低于零？如果是，请删除
If…else
。降低计数=>红色-这就是我理解的。您是指红色的负值、绿色的正值和黑色的零？如果是o:
counter.style.color=（counterNumericValue>0）？“绿色”：（counterNumericValueyes，这正是我试图实现的目标。我应该将代码片段粘贴到哪里？对于这些noob问题，非常抱歉……非常感谢您的帮助。当我将代码片段粘贴到VS中时，代码片段显示了几个错误。）code@Aaron，基于我的新理解，我发布了一个新的答案-希望有帮助！谢谢你，伙计。只是r在“红色”前面加上问号，效果很好。到目前为止，我还没有太多地使用条件三元运算符。没有立即注意到。谢谢