How to get value from input element from this html using JavaScript and also changing the background of the input element

Question

I need the javascript to change the background of input element to either red if the number greater than the preceding number or red if it is less than the preceding number

The value from the input element in html should be in array, then javascript should analyse the array and make the input element background green if the number is greater than the preceding number and then red if it less than the preceding number

The HTML

 <form>
   <input type="number" class="display" value="" id= "seat-1">
   <input type="number" class="display" value="" id= "seat-2">
   <input type="number" class="display" value="" id= "seat-3">
   <input type="number" class="display" value="" id= "seat-4">  
   <input type="number" class="display" value="" id= "seat-5">
   <input type="number" class="display" value="" id= "seat-6">
 </form>

The Javascript to get the value

 let seat1 = document.getElementById("seat-1").value;
 let seat2 = document.getElementById("seat-2").value;
 let seat3 = document.getElementById("seat-3").value;
 let seat4 = document.getElementById("seat-4").value;
 let seat5 = document.getElementById("seat-5").value;
 let seat6 = document.getElementById("seat-6").value;

The Javascript to make it an array and print red or green at the input background

 let seatRow1 = [ seat1,  seat2, seat3, seat4, seat5, seat6];

    for (let i = 0; i <  seatRow1.length;   i++) {

      if ( (seatRow1[i + 1]) > seatRow1[i]) {
       document.getElementByClassName("display").style.backgroundColor = 
          "green";
            }
      else { 
       document.getElementByClassName("display").style.backgroundColor = 
     "red";
     }
     }

Thanks

Answer 1

Rather than getting the element values on page load, you will need to check the values whenever one of them changes (since the values at page load will likely change as the user inputs information). One way to do that would be to listen on the input event and then check the value of the changed input and compare it to its siblings. For example:

 const changeBackground = (elem, v1, v2) => { if (v1 < v2) { elem.style.backgroundColor = 'red'; } else if (v1 > v2) { elem.style.backgroundColor = 'green'; } else { elem.style.backgroundColor = 'transparent'; } } const inputs = document.querySelectorAll('.display'); for (let input of inputs) { input.addEventListener('input', (event) => { let curr = event.target; let prev = curr.previousElementSibling; let next = curr.nextElementSibling; let cval = parseFloat(curr.value); if (prev) { changeBackground(curr, cval, parseFloat(prev.value)); } if (next) { changeBackground(next, parseFloat(next.value), cval); } }); } 

 <form> <input type="number" class="display" value="" id="seat-1"> <input type="number" class="display" value="" id="seat-2"> <input type="number" class="display" value="" id="seat-3"> <input type="number" class="display" value="" id="seat-4"> <input type="number" class="display" value="" id="seat-5"> <input type="number" class="display" value="" id="seat-6"> </form>