Automatically Switch Font Colors to Red and Green

Question

Automatically Switch Font Colors to Red and Green

I am looking to automate the process of changing multiple textbox colors based on the class property.

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

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

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

Text Box 1: The font color changes to green when I input a positive value like 25.

Text Box 2: The font color switches to red when I input a negative value like -2.

Text Box 3: The font color becomes black when I input 0.

Note: I prefer not to use Unique IDs for this task.

javascript css

Answer 1

Answer №1

Check it out, utilizing CSS classes and including "Not A Number" (NaN) as a special addition

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

.ColorChange.zero {
  color: black;
}

.ColorChange.negative {
  color: red;
}

.ColorChange.positive {
  color: green;
}

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

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

Answer 2

Check it out, utilizing CSS classes and including "Not A Number" (NaN) as a special addition

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

.ColorChange.zero {
  color: black;
}

.ColorChange.negative {
  color: red;
}

.ColorChange.positive {
  color: green;
}

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

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

Answer 3

Answer №2

To retrieve the value stored in the input, JavaScript will be necessary.

After obtaining the input's value, a conditional statement can be implemented to alter the color to green when the value exceeds 25.

Answer 4

To retrieve the value stored in the input, JavaScript will be necessary.

After obtaining the input's value, a conditional statement can be implemented to alter the color to green when the value exceeds 25.

Answer 5

Answer №3

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Page</title>
    <meta charset="UTF-8" />
  </head>

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

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

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

Answer 6

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Page</title>
    <meta charset="UTF-8" />
  </head>

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

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

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

Automatically Switch Font Colors to Red and Green

Answer №1

Answer №2

Answer №3

Similar questions

Tips for retrieving input values when they are not available in HTML documents

The lower border is unresponsive in the CSS/HTML code currently in use

What is the best approach for creating a Pagination component in React JS?

What is the best way to ensure an image within a Bootstrap 5 column scrolls along with the page, but does not go past

Using a jquery function within a Laravel view

Dealing with the error "Type 'date[]' is not assignable to type '[date?, date?]' in a React hook

Issue: Angular is indicating that the 'feedbackFormDirective' member is implicitly assigned with type 'any'

I'm encountering an issue with automatically updating content on a webpage

extracting key-value pairs from nested arrays in javascript objects

What is the best way to correctly showcase dynamic pages in ExpressJS?

Is there a way to modify the default color when the header is assigned the "sticky" class?

Having trouble getting the Facebook like button to display on my website using an iframe in the markup

Handling CORS in Vue.js applications

What is the method for creating a clickable link using only HTML5 and CSS3 on a div?

javascript basic image carousel

What is the best way to retrieve JSON values based on a key using JavaScript, jQuery, or AngularJS?

"Creating a navigational bar using Bootstrap in a one-page application

Tips for automatically disabling cloudzoom based on image width

Is it possible for me to invoke an anonymous self-executing function from a separate scope?

What is the best way to display a scrollbar at the bottom of the table while setting the table height to