Color change HTML-CodePudding

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>

CodePudding user response：

Although it's best to try and you should show your attempts, I assume you're stuck and cannot figure it out on your own. Below is a simple demonstration, if you enter a number in the input field which is below 25 it appears red, between 25-50, orange, and above, it appears green.

It would be better if you can use this example to implement your understanding now, or customise this as you wish.

const input = document.getElementById('number')

input.onkeyup = function () {
  let value = Number(input.value)
  if (value < 25) input.style.color = "red"

  // Here we check as long as the number is above 25, but below 50, we update to orange.
  if (value > 25 && value <= 50) input.style.color = "orange"
  if (value > 50) input.style.color = "green"
}

<input type="text" id="number">

CodePudding user response：

This jquery example will come in handy.

$("#myinput").keyup(function(){
  var myvalue = $(this).val();
  if(myvalue<=25){
    var color = "red";
  } else if(myvalue>25 && myvalue<=50){
    var color = "orange";
  } else {
    var color = "green";
  }
        $(this).attr("style","color:" color);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type="text" id="myinput">