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?

• Barmar: Styles that are added explicitly to the .style property take precedence over styles from CSS.

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>

• michael: Thx!Another little question about it if you can answer: Can the selector somehow disable the outcome of some function in javascript?For example :focus selector disable coloringButton() outcome so when I press on button the other button changes to default style.
• Barmar: No, but the function can check document.activeElement to determine which element is focused, and change what it does accordingly.

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