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?

Styles that are added explicitly to the .style property take precedence over styles from CSS. — Barmar
– Barmar, Commented Dec 8, 2021 at 22:26

Barmar · Accepted Answer · 2021-12-08 22:29:43Z

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>

answered Dec 8, 2021 at 22:29

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

michael Over a year ago

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 Over a year ago

No, but the function can check document.activeElement to determine which element is focused, and change what it does accordingly.

Maciej_Bossowski · Accepted Answer · 2021-12-08 23:19:50Z

1

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

edited Dec 8, 2021 at 23:19

answered Dec 8, 2021 at 23:12

Maciej_Bossowski

113 bronze badges

Collectives™ on Stack Overflow

CSS :focus Selector with Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related