1

Bootcamp sample html file suggests a button written like this:

<p><a class="btn btn-primary btn-lg" onclick="run_update()" role="button">Button</a></p>

Though, I've written button always like this

<button class="btn btn-primary" onclick="run_update()">Button</button>

They seems identical and functions similarly. I'm wondering are they any different or will they impact performance everso slighly?

Joe
  • 115
  • 1
  • 8
  • 3
    Since you’re only executing an action in JS on click, using an anchor for this is semantically incorrect. Also, inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Dec 01 '21 at 02:53
  • 1
    They are functionally the same and won't affect performance between the 2. The classes are slightly different (see bootstrap documentation) and the role="button" is for accesability - but isn't needed because the default role for button is 'button' https://stackoverflow.com/a/26952106/1772933 – Kinglish Dec 01 '21 at 02:58

1 Answers1

1

For this, always go for .addEventListener() instead of onclick. onclick is not recommended for executing an action in JS.

MDN (Mozilla Developer Network)
also states that .addEventListener must be used instead of onclick.

For the button, it doesn't affect the overall meaning and work of it. A button doesn't cause a change when inside a p tag.

DYNAMICMORTAL
  • 94
  • 1
  • 8