im trying to make a script to turn the lowest value to red and back to black when it gets higer again.

function findLowest() {
  // Get the input elements
  var value1 = document.getElementById("value1");
  var value2 = document.getElementById("value2");
  var value3 = document.getElementById("value3");

  // Find the lowest number value
  var lowestValue = Math.min(parseInt(value1.value), parseInt(value2.value), parseInt(value3.value));

  // Check which element has the lowest number value and add the "lowest" class to it
  if (parseInt(value1.value) === lowestValue) {
    value1.classList.add('lowest');
  } else if (parseInt(value2.value) === lowestValue) {
    value2.classList.add('lowest');
  } else if (parseInt(value3.value) === lowestValue) {
    value3.classList.add('lowest');
  }
}

.lowest {
  color: red;
}

input:not(.lowest) {
  color: black;
}

<form>
  <label for="value1">Value 1:</label><br>
  <input type="number" id="value1" name="value1" oninput="findLowest()"><br>
  <br>
  <label for="value2">Value 2:</label><br>
  <input type="number" id="value2" name="value2" oninput="findLowest()"><br>
  <br>
  <label for="value3">Value 3:</label><br>
  <input type="number" id="value3" name="value3" oninput="findLowest()"><br>
</form>

i got this to work but i cant get it back to black. my goal with this is to create a result tab on the left where it points out the lowest number with red. not in the text field.

CodePudding user response：

Resetting the values all back to black in the beginning of the function should leave you with only one red number at the end of it.

function findLowest() {
  // Get the input elements
  var value1 = document.getElementById("value1");
  var value2 = document.getElementById("value2");
  var value3 = document.getElementById("value3");

  // Remove class "lowest" to turn all numbers black
  value1.classList.remove('lowest');
  value2.classList.remove('lowest');
  value3.classList.remove('lowest');

  // Find the lowest number value
  var lowestValue = Math.min(parseInt(value1.value), parseInt(value2.value), parseInt(value3.value));

  // Check which element has the lowest number value and add the "lowest" class to it
  if (parseInt(value1.value) === lowestValue) {
    value1.classList.add('lowest');
  } else if (parseInt(value2.value) === lowestValue) {
    value2.classList.add('lowest');
  } else if (parseInt(value3.value) === lowestValue) {
    value3.classList.add('lowest');
  }
}

CodePudding user response：

You can do it simply by remove the lowest class from all inputs before doing anything in the function, and then determine the new lowest to give it the class, and this is the simple but big way.

---

To take a short and clear way, just do that:

function findLowest() {
  var inputs = [...document.querySelectorAll("input")]
  let values = inputs.map(input => input.value)
  var lowest = Math.min(...values)

  inputs.forEach(input => {
    input.classList[ input.value == lowest ? "add" : "remove" ]("lowest")
  })
}

.lowest { color: red; }

input:not(.lowest) { color: black; }

<form>
  <label for="value1">Value 1:</label><br>
  <input type="number" id="value1" name="value1" oninput="findLowest()"><br>
  <br>
  <label for="value2">Value 2:</label><br>
  <input type="number" id="value2" name="value2" oninput="findLowest()"><br>
  <br>
  <label for="value3">Value 3:</label><br>
  <input type="number" id="value3" name="value3" oninput="findLowest()"><br>
</form>

We're getting the inputs as an array, then get the values of the inputs with the map method, then get the lowest value with Math.min method, and finally loop over all inputs using the forEach method, and conditionally choose to add or remove the lowest class from the input that has the lowest value.

CodePudding user response：

maybe that ?
Use:
A- .valueAsNumber to get a input[type=number] number value ( not a string)
B- classList.toggle with it force boolean argument
C- event input directly on the form (not on each element)

const 
  myForm = document.forms['my-form']
, inNums = [...myForm.querySelectorAll('input[type=number]')]
  ;
myForm.oninput = event =>
  {
  let min = inNums.reduce((min,el)=>Math.min(el.valueAsNumber, min), Infinity);
  inNums.forEach( el => el.classList.toggle('lowest', el.value == min));
  }

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
.lowest {
  color : red; 
  }
label, input {
  display : block;
  }
label  {
  font-size : .8rem;
  margin    : .8rem
  }
input {
  font-size : 1rem;
  padding   : 0 0 0 0.5em;
  width     : 6rem;
  }

<form name="my-form">
  <label>Value 1: 
    <input type="number" name="value1" value="0" > 
  </label>
  <label>Value 2:
    <input type="number" name="value2" value="0"> 
  </label> 
  <label>Value 3:
    <input type="number"  name="value3" value="0">
  </label> 
</form>