Auto Change Font Color Red & Green

Question

I want to change multiple textbox colors automatically using the class property.

<input type="text" Class="ChangeColor" />

<input type="text" Class="ChangeColor" />

<input type="text" Class="ChangeColor" />

Text Box 1 : If I Type 25 (Positive value), then the font color is green

Text Box 2 : If I Type -2 (negative value), then the font color is red

Text Box 3 : If I Type 0, then the font color is black

Note: I do not want to use Unique ID's.

score 0 · Answer 1 · edited Mar 03 '22 at 10:07

0

You will need to use JavaScript to get the value from the input.

With the value from the input, you can add a logic to change the color to green if the value is greater than 25.

edited Mar 03 '22 at 10:07

Craws

576
4
30

answered Mar 03 '22 at 10:04

Jay Morelli

97
6

I Want Create dynamic class, That Auto Read And Auto Change Font Color ,Positive number (green) and negative number red (automatic). – Harshil Mar 03 '22 at 10:10
https://stackoverflow.com/questions/35639237/can-a-dynamic-class-be-styled-using-css – Jay Morelli Mar 03 '22 at 10:12
Maybe this can help? – Jay Morelli Mar 03 '22 at 10:12
`I Want Create dynamic class` - what do you mean? – Bravo Mar 03 '22 at 11:36

score 0 · Answer 2 · answered Mar 03 '22 at 12:10

Here you go, uses CSS classes - added Not A Number (NaN) as a bonus

const classes = ['nan', 'negative', 'zero', 'positive'];
document.querySelectorAll('input.ChangeColor')
.forEach(input => input.addEventListener('input', function(e) {
  this.classList.remove(...classes);
  if (this.value.length) {
    this.classList.add(classes[(Math.sign(+this.value) + 2) || 0]);
  }
}));

.ChangeColor.zero {
  color: black;
}

.ChangeColor.negative {
  color: red;
}

.ChangeColor.positive {
  color: green;
}

.ChangeColor.nan {
  border-color: red;
}

<input type="text" Class="ChangeColor" />
<input type="text" Class="ChangeColor" />
<input type="text" Class="ChangeColor" />

score -1 · Answer 3 · answered Mar 03 '22 at 10:34

const inputs = document.getElementsByClassName("ChangeColor");

Array.prototype.forEach.call(inputs, (item) => {
  item.addEventListener("input", function (e) {
    if (e.target.value > 0) {
      e.target.style.color = "green";
    } else if (e.target.value < 0) {
      e.target.style.color = "red";
    } else {
      e.target.style.color = "black";
    }
  });
});

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <input type="text" class="ChangeColor" />

    <input type="text" class="ChangeColor" />

    <input type="text" class="ChangeColor" />
    <script src="src/index.js"></script>
  </body>
</html>

Auto Change Font Color Red & Green

3 Answers3