CODEWITHSUNDEEP
htmlcss
Emma Rossignoli
Emma Rossignoli

Reputation: 945

Change color to HTML input value

I have a lot of input fields on my webpage as you can see

enter image description here

When I edit (for example) the scores of GP1, using a onchange event, each other score will automatically update. I'd like that when these results update, the color of that 2 input in the TOTAL row changes.

In this case the '13' should be red and the '15' should be green.

I thought to use some CSS code but I don't know how to use it with an onchange event. Any suggestion?

This is the code:

<td valign="bottom" width="110px">
<p align="center"><b>Home Clan</b></p>
</td>
<td valign="bottom" width="110px">
<p align="center"><b>Opponent Clan</b></p>
</td>
<td valign="bottom" width="110px">
<p align="center"><b> + / -  </b></p>
</td>
</tr>
<tr>
<td height="40px;" width="40px">
<p align="center"><b>GP1</b></p>
</td>
<td width="110px">
<p align="center"><input id="h1" type="text" name="h1" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input id="o1" type="text" name="o1" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input readonly id="diff1" type="text" name="diff1" style="width:70px"></p>
</td>
<td>
</td>
</tr>
<tr>
<td height="40px;" width="40px">
<p align="center"><b>GP2</b></p>
</td>
<td width="110px">
<p align="center"><input id="h2" type="text" name="h2" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input id="o2" type="text" name="o2" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input readonly  id="diff2" type="text" name="diff2" style="width:70px"></p>
</td>
<td>
</td>
</tr>
<tr>
<td height="40px;" width="40px">
<p align="center"><b>GP3</b></p>
</td>
<td width="110px">
<p align="center"><input id="h3" type="text" name="h3" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input id="o3" type="text" name="o3" value="0" style="width:70px" onchange="calc();"></p>
</td>
<td width="110px">
<p align="center"><input readonly  id="diff3" type="text" name="diff3" style="width:70px"></p>
</td>
<td>
</td>
</tr>
<tr>
<td height="13px">
</td>
</tr>
<tr>
<td height="40px;" width="40px">
<b>TOTAL</b>
</td>
<td width="110px">
<p align="center"><input readonly  id="htot" type="text" name="htot" style="width:70px"></p>
</td>
<td width="110px">
<p align="center"><input readonly id="otot" type="text" name="otot" style="width:70px"></p>
</td>
<td width="110px">
<p align="center"><input readonly id="difftot" type="text" name="difftot" style="width:70px"></p>
</td>
<td>
</td>
</tr>
</table>

Upvotes: 1

Views: 1138

Answers (2)

ibi0tux
ibi0tux

Reputation: 2619

Your question wasn't very clear but i think that you want to color in red the lower score and in green the highest.

You define a function like so, that will called in your onChange event.

function color()
{

    htot = document.getElementById('htot');
    otot = document.getElementById('otot');

    if ( htot.value < otot.value ) {
        htot.style.color = 'red';
        otot.style.color = 'green'; } else {
        otot.style.color = 'red';
        htot.style.color = 'green'; }
}

You can call this function at the end of your calc() function for instance.

Upvotes: 3

Žarko Selak
Žarko Selak

Reputation: 1131

Add class total on your TOTAL input and use this jQuery to change color ..

$("input").change(function () {
    $('.total').css("background", "orange");
});

Upvotes: 1

Related Questions