CODEWITHSUNDEEP
javascriptjqueryhtmlcss
C. Kelly
C. Kelly

Reputation: 207

output text color changes when value changes

Problem

I have a table that has inputs that the user enters values, JavaScript runs Calc. and displays the output value. To make the user experience better I would like to change the color of the text when the output changes based on the Calculations that JavaScript peforms. Is this possible?

My Effort

I have looked over the Internet and have not found anything other than when entering values into the input, never anything dealing with the output text.

Example Code http://codepen.io/coryk/pen/rLGZYa

HTML

<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td>Input</td>
                        <td><input class="input_green" id="input" type="number" value="0"></td>
            <td></td>
            <td>Output</td>
            <td><input class="input_yellow" id="output" readonly type="number" value="10"></td>
        </tr>
    </table>
</body>

JavaScript

var foo = function(){
    var val = parseFloat($('#input').val());
    var total = val * 3;
    $('#output').val(total);
}

foo();

document.getElementById("input").onchange = (function() {
foo();

});

Upvotes: 0

Views: 55

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28563

You already have a class on the input. I suggest you set a default color for the text here via css and work from there. Yellow is difficult to see. I have used blue

If you run the snippet below, you will see that if you enter 1 in the first input box, the output is blue, but when you enter e.g. 4 or 5, as the result is over 10, the output is red. 

var foo = function(){
	var val = parseFloat($('#input').val());
	var total = val * 3;
	if(total > 10){
		$('.input_blue').css("color", "red");
	}
	$('#output').val(total);
}

foo();

document.getElementById("input").onchange = (function() {
foo();
});
.input_blue{color:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <table>
        <tr>
            <td>Input</td>
						<td><input class="input_green" id="input" type="number" value="0"></td>
            <td></td>
            <td>Output</td>
            <td><input class="input_blue" id="output" readonly type="number" value="10"></td>
        </tr>
    </table>
</body>

Upvotes: 1

Marcus
Marcus

Reputation: 341

Something like this?

var foo = function(){
    var val = parseFloat($('#input').val());
    var total = val * 3;
    $('#output')
    .val(total);
    .css('color', 'rgb('+[(val^2)%256,(val*5)%256, (val%256)*2].join(',') +')')
}

Upvotes: 0

Related Questions