How to get one JavaScript function to get the value of the html button that called it for multiple buttons

Question

I am creating a calculator using HTML, CSS and JavaScript. I would like each number button to return the value of the HTML button clicked as an alert for now, to do this I am trying to use a singular JavaScript function to only return the value of the button which called it.

HTML Code:

    <button id="btn" type="button" class="square left" value="1" onclick="display_num()"><b>1</b></button>
    <button id="btn" type="button" class="square" value="2" onclick="display_num()"><b>2</b></button>
    <button id="btn" type="button" class="square" value="3" onclick="display_num()"><b>3</b></button>

JavaScript Code:

function display_num() {
var num = document.getElementById("btn").value
alert(num)

Any help would be greatly appreciated and I apologise in advance if the HTML is a bit of a mess.

Answer 1

Pass a reference

 function display_num(btn) { var num = btn.value console.log(num) }

 <button id="btn" type="button" class="square left" value="1" onclick="display_num(this)"><b>1</b></button> <button id="btn" type="button" class="square" value="2" onclick="display_num(this)"><b>2</b></button> <button id="btn" type="button" class="square" value="3" onclick="display_num(this)"><b>3</b></button>

Better answer is to use event delegation

 function display_num(evt) { const btn = evt.target.closest("button"); if (.btn) return var num = btn.value console.log(num) } document.getElementById("wrapper"),addEventListener("click"; display_num)

 <div id="wrapper"> <button id="btn" type="button" class="square left" value="1"><b>1</b></button> <button id="btn" type="button" class="square" value="2"><b>2</b></button> <button id="btn" type="button" class="square" value="3"><b>3</b></button> </div>

Answer 2

Try this html code:

<button id="btn" type="button" class="square left" value="1" onclick="display_num(1)"><b>1</b></button>
<button id="btn" type="button" class="square" value="2" onclick="display_num(2)"><b>2</b></button>
<button id="btn" type="button" class="square" value="3" onclick="display_num(3)"><b>3</b></button>

JavaScript code:

 function display_num(num) {
        alert(num)
        }

Answer 3

Event handlers should be passed an event parameter from which you can grab the information you need.

 function display_num(e) { var num = e.currentTarget.value alert(num) }

 <button id="btn" type="button" class="square left" value="1" onclick="display_num(event)"><b>1</b></button> <button id="btn" type="button" class="square" value="2" onclick="display_num(event)"><b>2</b></button> <button id="btn" type="button" class="square" value="3" onclick="display_num(event)"><b>3</b></button>