Change color of text field based on value inside

Design help Layout & Design
1

Hi,

As mentioned in title, I would like to change the color of the foot in a text field (not a rich text field) depending on the value inside it.

Examples:

  • if it’s “bad”, make it red
  • if it’s “good”, make it green
  • if it’s “0”, make it dark red
  • if it’s “5”, make it yellow
  • if it’s “10”, make it green

Is it custom JS? Via interactions? Something I’m missing in the standard menus?

Btw, I really LOVE webflow. Thanks for making this awesome tool!

Bernard

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Awesome. Thank you Bimbi and sorry for the late reply!

3 
function changeColor() {
  var textField = document.getElementById('text-field-id'); // Replace with the actual ID or class of your text field
  var value = textField.innerText || textField.textContent;

  switch (value) {
    case 'bad':
      textField.style.color = 'red';
      break;
    case 'good':
      textField.style.color = 'green';
      break;
    case '0':
      textField.style.color = 'darkred';
      break;
    case '5':
      textField.style.color = 'yellow';
      break;
    case '10':
      textField.style.color = 'green';
      break;
  }
}