Changing Color of Text Based on Variable

Issue

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.

Solution

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>

Answered By - Marco Amato