使用条件更改 JS 中的颜色

Question

我正在做迷你 JS 计数器项目。一切都很好，虽然我坚持给“0”一个特定的颜色。到目前为止，我的代码如下所示

(function() {
  const counter = document.querySelector('h1');
  const add = document.querySelector('.increase');
  const substract = document.querySelector('.decrease');
  let count = 0;

  add.addEventListener('click', function() {
    counter.innerHTML = count++;
    if (count > 0) {
      counter.classList.add('over')
    }
  })

  substract.addEventListener('click', function() {
    counter.innerHTML = count--;
    if (count < 0) {
      counter.classList.add('under')
    }
  })
})()

.over {
  color: green;
}

.under {
  color: red;
}

.zero {
  color: gray;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="counter.css">
</head>

<body>
  <h1>0</h1>
  <button class="decrease">-</button>
  <button class="increase">+</button>
  <script src="counter.js"></script>
</body>

</html>

发生的事情是我无法以任何方式在两个条件中添加 class 'zero'。我是否尝试通过 else 将 class 'zero' 添加到每个按钮，否则无论其值如何，计数器的颜色都保持绿色或红色。

Answer 1

您必须取消分配另一个 css 类以便始终显示正确的。

(function() {
  const counter = document.querySelector('h1');
  const add = document.querySelector('.increase');
  const substract = document.querySelector('.decrease');
  let count = 0;

  add.addEventListener('click', function() {
    counter.innerHTML = ++count;
    if (count > 0) {
     counter.classList.remove('under', 'zero')
      counter.classList.add('over')
    }
    else if (count == 0) {
     counter.classList.remove('under', 'over')
      counter.classList.add('zero')
    }
  })

  substract.addEventListener('click', function() {
    counter.innerHTML = --count;
    if (count < 0) {
     counter.classList.remove('over', 'zero')
      counter.classList.add('under')
    }
    else if (count == 0) {
     counter.classList.remove('under', 'over')
      counter.classList.add('zero')
    }
  })
})()

.over {
  color: green;
}

.under {
  color: red;
}

.zero {
  color: gray;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="counter.css">
</head>

<body>
  <h1>0</h1>
  <button class="decrease">-</button>
  <button class="increase">+</button>
  <script src="counter.js"></script>
</body>

</html>

附带说明一下，我注意到在单击加号和减号按钮时，该值也没有显示正确的数字。在代码中，我将 'count++' 和 'count--' 更改为“++count”和“--count”。这改变了操作的顺序。例如，'count++' 将计数分配给 html，然后递增变量，但是“++count”递增变量，然后将新值分配给 html。

Answer 2

是否应该修复：

(function () {
            const counter = document.querySelector('h1');
            const add = document.querySelector('.increase');
            const substract = document.querySelector('.decrease');
            let count = 0;

            add.addEventListener('click', function () {
                count++;
                counter.innerHTML = count
                if (count > 0) {
                    counter.classList.add('over');
                    counter.classList.remove('under')
                } else if(count === 0) {
                    counter.classList.remove('under')
                    counter.classList.remove('over')
                }
            })


            substract.addEventListener('click', function () {
                count--;
                counter.innerHTML = count
                if (count < 0) {
                    counter.classList.add('under')
                    counter.classList.remove('over')
                } else if(count === 0) {
                    counter.classList.remove('under')
                    counter.classList.remove('over')
                }
            })
        })()

使用条件更改 JS 中的颜色

Changing colors in JS with conditionals

javascript

add

colors