shade :
I created a simple program that contains two buttons "higher" that adds 1 to the number and "lower" that subtracts 1 from the same number. When the number is negative it must change its color to red and when it is positive it must become green but that doesn't work. Here's the javascript
let num = 0;
function higher() {
num ++;
document.getElementById("number").innerHTML = num;
}
function lower() {
num --;
document.getElementById("number").innerHTML = num;
}
// (conditionals statements below do not work for an unknown reason)
if (num < 0) {
document.getElementById("number").style.color = "red";
} else if (num > 0) {
document.getElementById("number").style.color = "green";
}
Here's the Html body
<body>
<div class="counter">
<div id="number">0</div>
<button onmousedown="higher()" class="btn_high">Higher</button>
<button onclick="lower()" class="btn_low">Lower</button>
</div>
</body>
Here's an example of how the program should look https://romeojeremiah.github.io/Counter-Project/
Nyx :
You have to put the conditional statement inside a function and then call that function on each button click like this
let num = 0;
function higher() {
num ++;
document.getElementById("number").innerHTML = num;
colorChange();
}
function lower() {
num --;
document.getElementById("number").innerHTML = num;
colorChange();
}
function colorChange(){
if (num < 0) {
document.getElementById("number").style.color = "red";
} else if (num > 0) {
document.getElementById("number").style.color = "green";
}
}
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=302389&siteId=1