我正在做迷你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>发生的事情是我无法以任何方式在两个条件中添加类'零'。是否尝试将“零”类添加到每个按钮，否则计数器的颜色不管其值如何仍为绿色或红色。
您必须取消分配其他CSS类，以便始终显示正确的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”将变量递增，然后“ then”将新值分配给html。
是否应解决：
(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')
}
})
})()