Trying to make a simple increase/decrease counter. When var n is < 0 it changes to red, and same for ==, but when its greater than it stays black..am i missing something?
var n = 0
function increase() {
n = n + 1
document.getElementById('num').innerHTML = n
if (n > 0) {
document.getElementById('num').style.color = '#013220'
}
else if (n < 0) {
document.getElementById('num').style.color = '#ff0000'
}
else if (n == 0) {
document.getElementById('num').style.color = '#000000'
}
}
no error messages.
this is a way to do it:
var n = -2. // let me start with a negative number so we can see that color too
function increase() {
n = n + 1;
let color = '#000000'; // default color is black
if (n > 0){
color = '#CC0'; // yellow when n > 0
}
if (n < 0){
color = '#ff0000'; // red when n < 0
}
const elem = document.getElementById('numWrapper')
elem.innerHTML = n
elem.style.color = color
}<div id='numWrapper'>-2</div>
<button onClick='increase()'>Increase</button>