Checking color of an input to disable or enable a submit button

I’ve set up a changing input background color dependent on validity of the input.

I am then checking the color with this code:

let elem = document.getElementById("UserInput");
console.log(elem);

let theStyle = window.getComputedStyle(elem, "").getPropertyValue("background-color");


if (theStyle === "rgb(234, 198, 198)") {
  document.getElementById("Submit").disabled = true;
}

if (theStyle === "rgb(251, 250 ,245)") {
  document.getElementById("Submit").disabled = false;
}

input[type="number"]+div {
  display: none;
}

input[type="number"]:valid {
  background-color: #fbfaf5;
}

input[type="number"]:invalid {
  background-color: #eac6c6;
}

input[type="number"]:invalid+div {
  display: block;
  color: #c66464;
}

<input type="number" id="UserInput" class="form-control" autocomplete="off" min="0" max="99999" step="0.01" value="" required />
<input type="submit" id="Submit" />

The only thing I am missing is how to continuously check the colour when active (it’s already inside a called function). Currently the “disabled” is true because the rgb is that red. But when I get the color to change, ie I use a correct input, then I would like to enable the submit button. So, I guess I need an eventListener in there, but I just can’t quite get the context.

Answer

Here’s a code snippet that listens to the changes in the input field. I am not sure exactly how the input value relates to the background value, so I’ll leave that part to you to decide But you can test it using the 2 buttons I added, changing the value when the background color is red make the submit button disabled changing the value when the bg color is the right green leaves it enabled

In case there is not a suitable event that you can listen to in order to make this work, you can use setTimeout instead of event listener (every other solution I checked harms the site performance – slows it down significantly)

Also an important note: you had a misplaced comma ‘theStyle === “rgb(251, 250 ,245)”‘ before the third parameter (Blue) value, the comma should come right after the second argument and then a space and then the third value.

let elem = document.getElementById("UserInput");

elem.addEventListener('change', () => {
  let theStyle = window.getComputedStyle(elem, "").getPropertyValue("background-color");
  let submitBtn = document.getElementById("Submit");

  if (theStyle === "rgb(234, 198, 198)") {
    submitBtn.disabled = true;
  } else if (theStyle === "rgb(251, 250, 245)") {
    submitBtn.disabled = false;
  }

});

document.querySelector("#valid-btn").addEventListener('click', () => {
  elem.style.backgroundColor = "#fbfaf5";
});

document.querySelector("#invalid-btn").addEventListener('click', () => {
  elem.style.backgroundColor = "#eac6c6";
});

input[type="number"]+div {
  display: none;
}



input[type="number"]:invalid+div {
  display: block;
  color: #c66464;
}

<input type="number" id="UserInput" class="form-control" autocomplete="off" min="0" max="99999" step="0.01" value="" required />
<input type="submit" id="Submit" disabled/>

<button id="valid-btn">change bg to green</button>
<button id="invalid-btn">change bg to red</button>