1

I want to click on one of several buttons and show it has been clicked on by changing a property e.g.:

function clickMeFunction() {
  var curElement =  document.activeElement;
  curElement.style.borderColor = "red";
}
<button onclick="clickMeFunction()">Click me to border color red</button>

This works on Chrome but not on Safari or Firefox. The best way to see the problem is to run the W3 "try it" for activeElement, and click on the button.

On Chrome, it says the active element is BUTTON but the active element is BODY on Safari and Firefox. Yet W3 also says that all major browsers support activeElement. What am I missing and how do I select the button that I just clicked on so I can highlight it on all browsers?

thank you

Mohammad Ali Rony
  • 4,695
  • 3
  • 19
  • 33
tlturton
  • 188
  • 3
  • 12
  • 4
    W3 is usually used to refer to the W3C (they do have the domain w3.org). Please don't use it as an abbreviation for the terrible, often wrong, advertising riddled W3Schools. – Quentin Jun 03 '18 at 20:42
  • Works for me in FF - says Button. – CertainPerformance Jun 03 '18 at 20:42
  • @Quentin "Can I use? " says [it well supported](https://caniuse.com/#search=activeElement), I checked in FF 60.0.1 and it works as expected, Are you sure you identify the problem properly? – Michael Jun 03 '18 at 20:42
  • First, I apologize for confounding W3 with W3Schools. Truly, mea culpa. Second, no really, it doesn't work for me, either on the w3schools TryIt or within my own code. When I change the activeElement backgroundColor, the whole body changes color on FF and Safari while only the button changes color on Chrome. – tlturton Jun 03 '18 at 20:58
  • Update, works on a PC, doesn't work on Mac. I'll just go on with my life here, thanks.... – tlturton Jun 03 '18 at 21:08
  • 1
    This sounds like a horrible idea. Use either [CSS `:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) to highlight the element, or use the `event.target` in a JS event handler to work with the clicked element. – Bergi Jun 03 '18 at 21:10
  • Thank you, the event.target approach worked. – tlturton Jun 03 '18 at 21:40
  • Does this answer your question? [Can I determine which Submit button was used in javascript?](https://stackoverflow.com/questions/2298635/can-i-determine-which-submit-button-was-used-in-javascript) – tutuDajuju Aug 04 '20 at 16:28
  • This is a Mac-specific issue for Safari and Firefox. The ` – Martin_W Jun 19 '23 at 19:24

0 Answers0