CSS :focus Selector with Javascript-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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