Databases
StackOverflow2013
Postsdbo
POChange color to HTML input value
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange color to HTML input value
    text
    copied!<p>I have a lot of input fields on my webpage as you can see</p> <p><img src="https://i.stack.imgur.com/MEypN.png" alt="enter image description here"></p> <p>When I edit (for example) the scores of GP1, using a <code>onchange</code> 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.</p> <p>In this case the '13' should be red and the '15' should be green.</p> <p>I thought to use some CSS code but I don't know how to use it with an <code>onchange</code> event. Any suggestion?</p> <p>This is the code:</p> <pre><code>&lt;td valign="bottom" width="110px"&gt; &lt;p align="center"&gt;&lt;b&gt;Home Clan&lt;/b&gt;&lt;/p&gt; &lt;/td&gt; &lt;td valign="bottom" width="110px"&gt; &lt;p align="center"&gt;&lt;b&gt;Opponent Clan&lt;/b&gt;&lt;/p&gt; &lt;/td&gt; &lt;td valign="bottom" width="110px"&gt; &lt;p align="center"&gt;&lt;b&gt; + / - &lt;/b&gt;&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="40px;" width="40px"&gt; &lt;p align="center"&gt;&lt;b&gt;GP1&lt;/b&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input id="h1" type="text" name="h1" value="0" style="width:70px" onchange="calc();"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input id="o1" type="text" name="o1" value="0" style="width:70px" onchange="calc();"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input readonly id="diff1" type="text" name="diff1" style="width:70px"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="40px;" width="40px"&gt; &lt;p align="center"&gt;&lt;b&gt;GP2&lt;/b&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input id="h2" type="text" name="h2" value="0" style="width:70px" onchange="calc();"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input id="o2" type="text" name="o2" value="0" style="width:70px" onchange="calc();"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input readonly id="diff2" type="text" name="diff2" style="width:70px"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="40px;" width="40px"&gt; &lt;p align="center"&gt;&lt;b&gt;GP3&lt;/b&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input id="h3" type="text" name="h3" value="0" style="width:70px" onchange="calc();"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input id="o3" type="text" name="o3" value="0" style="width:70px" onchange="calc();"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input readonly id="diff3" type="text" name="diff3" style="width:70px"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="13px"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="40px;" width="40px"&gt; &lt;b&gt;TOTAL&lt;/b&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input readonly id="htot" type="text" name="htot" style="width:70px"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input readonly id="otot" type="text" name="otot" style="width:70px"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td width="110px"&gt; &lt;p align="center"&gt;&lt;input readonly id="difftot" type="text" name="difftot" style="width:70px"&gt;&lt;/p&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload