Вы должны отменить присвоение других 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.