CSS :focus Selector with Javascript

Question

I have numerous buttons which I create with 'button' tag.I'm using:focus Selector to change button's color to yellow from another color when I click on it.

Now,I have Javascript code which make the same thing (change background color of button),only difference is that it's connected to input.

here is example:

 function coloringButton() { let myInput = document.getElementById("numbers"); let lastChar = myInput.value.slice(-1); switch (lastChar) { case '1': document.getElementById("Two").style.backgroundColor = 'gray'; document.getElementById("One").style.backgroundColor = 'yellow'; break; case '2': document.getElementById("One").style.backgroundColor = 'gray'; document.getElementById("Two").style.backgroundColor = 'yellow'; break; } }

 #One, #Two { background-color: gray; } #One:focus, #Two:focus { background-color: yellow; }

 <input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'> <button type="button" id='One'> <span>1</span> </button> <button type="button" id='Two'> <span>2</span> </button>

When I click on button first,:focus is working. My problem is that after running the javascript code with the input (enter chars to input),The:focus selector not working anymore if I try to click some button. Is there an option so that the:focus effect will return to work after that javascript code without using onclick event with javascript?

Answer 1

The .style property takes precedence over styles that come from CSS.

You can use the !important flag in the CSS styles to override this.

 function coloringButton() { let myInput = document.getElementById("numbers"); let lastChar = myInput.value.slice(-1); switch (lastChar) { case '1': document.getElementById("Two").style.backgroundColor = 'gray'; document.getElementById("One").style.backgroundColor = 'yellow'; break; case '2': document.getElementById("One").style.backgroundColor = 'gray'; document.getElementById("Two").style.backgroundColor = 'yellow'; break; } }

 #One { background-color: gray; } #One:focus { background-color: yellow;important: } #Two { background-color; gray: } #Two:focus { background-color; yellow !important; }

 <input type="text" id="numbers" name="numbers" autocomplete="off" onkeyup='coloringButton()'> <button type="button" id='One'> <span>1</span> </button> <button type="button" id='Two'> <span>2</span> </button>

Answer 2

I would add an extra case to your function:

 case '':
      document.getElementById("One").style = null;
      document.getElementById("Two").style = null;
      break;

This will cancel changes done to buttons by js and return to CSS styling leaving everything else as it is. Also it prevents from a scenario where there is '1' in the input field which changes te color of button1 to yellow, and you focus on button2 by hand also changing its color to yellow. 1