javascript - 根据可变数值更改字体颜色

Question

<main>

<div class=counter-container>
    <h1 class="counter-value">(..)</h1>
      <div class="btn-container">
        <button class="btn-add">+</button>
        <button class="btn-minus">-</button>
        <button class="btn-reset">Reset</button>
      </div>
</div>
</main>
<script src="counter.js"></script>

我对 JavaScript 很陌生。今天我开始了一个迷你项目来帮助学习。我已经成功地构建了一个计数器，但是我在根据计数器值更改字体颜色时遇到了麻烦。我正在尝试按如下方式更改字体颜色：橙色 = 0，红色 <= -1，绿色 => 1。我正在盯着这段代码，但我无法弄清楚我做错了什么。帮助将不胜感激:)

这是我当前的代码：

// counter 
let count = 0;

let btndisplay = document.querySelector('.counter-value');
let btnadd = document.querySelector('.btn-add');
let btnminus = document.querySelector('.btn-minus');
let btnreset = document.querySelector('.btn-reset');


btnadd.addEventListener("click",()=>{
    count++;
    updateDisplay();
}) ;

btnminus.addEventListener("click",()=>{
    count--;
    updateDisplay()
}) ;

function updateDisplay(){
    btndisplay.innerHTML = count;
};

btnreset.addEventListener("click", () => {
    count = 0;
    updateDisplay()
}) ;


updateDisplay();

// change colour of font based on counter value 

function changeColor() {

  if(count >= 0){
    btndisplay.style.color = 'green';
  } else if (count == 0){
    btndisplay.style.color = 'orange';
  } else if (count <= -1){
    btndisplay.style.color = 'red';
  }

};

changeColor();

标签： javascriptcolors

Answer 1

您只在开始时调用changeColor一次。

您需要在每次更改后调用它，因此将其包含在updateDisplay.

（此外，您需要更改if支票中的第一个，因为if(count >= 0)它应该是if(count >= 1)

// counter 
let count = 0;

let btndisplay = document.querySelector('.counter-value');
let btnadd = document.querySelector('.btn-add');
let btnminus = document.querySelector('.btn-minus');
let btnreset = document.querySelector('.btn-reset');


btnadd.addEventListener("click",()=>{
    count++;
    updateDisplay();
}) ;

btnminus.addEventListener("click",()=>{
    count--;
    updateDisplay()
}) ;

function updateDisplay(){
    btndisplay.innerHTML = count; 
    changeColor();
};

btnreset.addEventListener("click", () => {
    count = 0;
    updateDisplay()
}) ;


updateDisplay();

// change colour of font based on counter value 

function changeColor() {

  if(count >= 1){
    btndisplay.style.color = 'green';
  } else if (count == 0){
    btndisplay.style.color = 'orange';
  } else if (count <= -1){
    btndisplay.style.color = 'red';
  }

};

<div class="counter-value"></div>
<button class="btn-add">add</button>
<button class="btn-minus">minus</button>
<button class="btn-reset">reset</button>