根据值更改html 5输出对象的颜色

Question

I want to change the color of the result of a calculation to red if it is negative. I tried a style sheet, and putting the output into a javascript call, but it did not seem to work. Is there a way to change the color of an html 5 output "o" in the example code below to red if it is negative and green if it is positive?

form oninput="o.value = a.valueAsNumber + b.valueAsNumber"
input name="a" id="a" type="number" step="any" +
input name="b" id="b" type="number" step="any" =
output name="o" for="ab">

/form

Answer 1

Not a big fan of just giving answers when users haven't shown what they've tried first but this was actually a bit fun, I've never seen this type of form before.

Like @feeela said, you can use JS to watch for input changes and validate the output field accordingly. I'm using jQuery to do this as such:

$(document).ready(function() {
    $('input').change(
        function()
        {
            $('output').removeAttr('class');
            var sum = parseInt($('output').first().html());
            if (isNaN(sum))
            {
                $('output').addClass('error');
            }
            else if (sum < 0)
            {
                $('output').addClass('negative');
            }
            else if (sum > 0)
            {
                $('output').addClass('positive');
            }
        }
    );
});

Then you can use you style sheet to give the output field a colour depending on its class. ​ You can view a demo here: http://jsfiddle.net/S7cVP/