如何獲得一個 JavaScript function 以獲取為多個按鈕調用它的 html 按鈕的值

Question

我正在使用 HTML、CSS 和 JavaScript 創建一個計算器。 我希望每個數字按鈕返回 HTML 按鈕的值，現在單擊該按鈕作為警報，為此我嘗試使用單個 JavaScript function 按鈕的值返回。

HTML 代碼：

    <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 代碼：

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

任何幫助將不勝感激，如果 HTML 有點亂，我提前道歉。

Answer 1

傳遞參考

 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>

更好的答案是使用事件委托

 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

試試這個 html 代碼：

<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 代碼：

 function display_num(num) {
        alert(num)
        }

Answer 3

應該向事件處理程序傳遞一個事件參數，您可以從中獲取所需的信息。

 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>