How do I make multiple buttons within the same class call to the same parameter function inside JavaScript?

Question

I have a div with 3 different buttons labeled 1 - 3. Currently, all 3 buttons use an inline event that passes its innerHTML as a parameter:

<div class="theClass">
    <button onclick="doThing(this.innerHTML)">1</button>
    <button onclick="doThing(this.innerHTML)">2</button>
    <button onclick="doThing(this.innerHTML)">3</button>
</div>

<script>
    function doThing(num){
        ...
    }
</script>

In an effort to both avoid redundancy and avoid inline scripting, I want to know how it would be possible to do this without an inline for each button. How would I make multiple buttons within the same class call the same external script? That is to say, how can I format a function to recognize that a button inside a designated class has been clicked, get the innerHTML of that button, and then pass it as a parameter?

Answer 1

You can select all buttons with querySelectorAll, loop through the NodeList and use addEventListener to add a click event listener that calls doThing and passes the element's innerHTML as a parameter to each button:

const buttons = document.querySelectorAll('button');

buttons.forEach(e => e.addEventListener('click', function(){ doThing(this.innerHTML) }))


function doThing(html){
  console.log(html)
}

<div class="theClass">
    <button>1</button>
    <button>2</button>
    <button>3</button>
</div>

Alternatively, you can use event delegation by adding a click event listener to the document and checking whether the target is a button (with Element.matches()), and if so, call doThing:

document.addEventListener('click', function(e){
  if(e.target.matches('button')){
    doThing(e.target.innerHTML)
  }
})
function doThing(html){
  console.log(html)
}

<div class="theClass">
    <button>1</button>
    <button>2</button>
    <button>3</button>
</div>