时间戳

首页 > 解决方案 > 我无法为我的柜台项目添加颜色

javascript - 我无法为我的柜台项目添加颜色

问题描述

我正在创建一个计数器项目，当单击相应的按钮时会增加重置或减少计数，并且计数的颜色也会针对计数的正负和零值发生变化，但是如果计数为正、负、零，我无法更改计数的颜色，但是我的代码仅在计数为零时执行。

<!DOCTYPE html>
<html>
<head>
    <title>Counter</title>
    <link rel="stylesheet" type="text/css" href="./counter.css">
</head>
<body>
    <h1>Counter<h1>
        <h1 id="counter">0</h1>
    <div>
>       <ul>
            <li id="decrease"><button>DECREASE</button></li>
            <li id="reset"><button>RESET</button></li>
            <li id="increase"><button>INCREASE</button></li>
        </ul>
    </div>
    <script src="counter.js">
    </script>
</body>
</html

const decrease = document.getElementById("decrease");
const increase = document.getElementById("increase");
const reset = document.getElementById("reset");
var counter = document.getElementById("counter");
var count = 0;

decrease.addEventListener("click", function(){
    count -= 1;
    counter.textContent = count;

});
increase.addEventListener("click", function(){
    count += 1;
    counter.textContent = count;
});
reset.addEventListener("click", function(){
    count = 0;
    counter.textContent = count ;
});
 counter.style.color = colour();
    function colour(){
        if (count === 0){
        return "blue";
    }
    if(count > 0){
        return  "green";
    }

    if(count < 0){
        return "black";
    }
}

标签： javascripthtmlcss

解决方案

您尝试更新的方式存在问题，color这就是它未更新的原因。而不是每次点击调用函数，你只是运行它一次，因此问题。您应该创建一个函数来更新颜色并在所有 3 个单击处理程序中更新计数器后调用它。

let count = 0;
const elemCounter = document.getElementById("counter");

function increase() {
  count++;
  updateCount();
}

function decrease() {
  count--;
  updateCount();
}

function reset() {
  count = 0;
  updateCount();
}

function updateCount() {
  elemCounter.innerText = count;
  updateColor();
}

function updateColor() {
  let color = "blue";
  if (count > 0) {
    color = "green";
  } else if (count < 0) {
    color = "red";
  }
  elemCounter.style.color = color;
}
#counter {
  padding: 5px;
  margin-bottom: 5px;
  height: 25px;
}
<div id="counter"></div>
<button onclick="increase()">Increase</button> <br />
<button onclick="decrease()">Decrease</button> <br />
<button onclick="reset()">Reset</button>

推荐阅读