Color change HTML

January 14, 2022

I would like an ‘input type="text"’, if the values are greater than 50 then the text should appear in green, is the value between 25 and 50 orange and less than 25 red.

But I don’t know how to make it work exactly can someone help me with such an HTML file?

<body>
<form>
  <label for="fname">Value</label>
  <input type="text" id="value" name="value">
</form>
if value is less than 25 > red,
if value is between 25 - 50 > orange, 
if value is greater than 50 > green.
</body>

>Solution :

Although you should show your attempts, I assume you cannot figure it out on your own. Below is a simple demonstration, if you enter a number in the input field which is below 50 it appears green, above and it appears red.

It would be better if you can use this example to implement your understanding now.

const input = document.getElementById('number')

input.onkeyup = function () {
  if (Number(input.value) < 25) input.style.color = "red"
  if (Number(input.value) > 25 && Number(input.value) < 50) input.style.color = "orange"
  if (Number(input.value) > 50) input.style.color = "green"

}