I am trying to write a Javascript function that changes the font color of an element. I was unsure how to fire off the function right away, so I called the javascript function with an onload call in the element tag. I am retrieving a value through PHP and loading it into the function: if value > 0, set font to green; else if value < 0, set font to red; else, set font to black. Here is what I have so far:
HTML header tag populated with the PHP value:<h1 id="change" onload="checkChange()"><?php echo number_format(array_sum($total_balance), 2, '.', ''); ?></h1>
Javascript to change the font color:
<script>
function checkChange() {
var change = <?php echo array_sum($total_balance); ?>;
if change > 0 {
document.getElementById("change").style.color = "#00FF00";
} else if change < 0 {
document.getElementById("change").style.color = "#FF0000";
} else {
document.getElementById("change").style.color = "#000000";
}
}
</script>
With the code provided, the header shows the value, but the color is not affected. Thanks!