JavaScript Toggle button not working for buttons in an HTML table

Question

The following JavaScript code toggles HTML buttons. However buttons in a <table> element are not toggled, instead the buttons flash the label "Forget" for a split second. Why are <button> elements in each cell of a table not toggled by the JavaScript code below?

<button class="buttonOne">Connect</button>
<button class="buttonTwo">Connect</button>
<button class="buttonThree">Connect</button>

question from:https://stackoverflow.com/questions/65846419/javascript-toggle-button-not-working-for-buttons-in-an-html-table

Answer 1

You could select them by giving unique Id. Example:

   <button id="btn1" class="buttonOne">Connect</button>
   <button id="btn2" class="buttonTwo">Connect</button>
   <button id="btn3" class="buttonThree">Connect</button> 

And select them at your Js file:

const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');

This way you should have no problems with those buttons.