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?
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>