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!
onload is not valid for a h1 tag, put it on the body tag instead.
http://www.w3schools.com/jsref/event_onload.asp
or you can run it before onload with an inline script after the h1 tag.
or you could set it server side and have no JavaScript.
If you are working on JavaScript be sure your browsers debugger is set to pause on exceptions.