使用条件更改 JS 中的颜色答案

【问题标题】：Changing colors in JS with conditionals使用条件更改 JS 中的颜色
【发布时间】：2020-05-04 16:23:45
【问题描述】：

我正在做迷你 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>

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

【问题讨论】：

除了给<h1>元素添加一个特定的类，你还必须删除其他类（例如：counter.classList.remove('over', 'under', 'zero')）。

标签： javascript colors add

【解决方案1】：

是否应该修复：

(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')
                }
            })
        })()

【讨论】：

【解决方案2】：

您必须取消分配其他 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。

【讨论】：