如何在计算器中获取点击按钮的值

Question

我有多个包含不同值的按钮

<button data-action="digit" class="button" id="1">1</button>
<button data-action="digit" class="button" id="2">2</button>
<button data-action="digit" class="button" id="3">3</button> 

我想让这些按钮显示在计算器上使用javascript:

function digit_pressed(digit) {

console.log("digit pressed: " + digit);
}

但我不确定要添加什么到我的功能。任何帮助都将是非常感激的:)

Answer 1

您可以使用querySelectorAll来选择所有button，然后使用addEventListener来添加单击事件，最后一步使用textContent来设置数字和呼叫功能。

document.querySelectorAll('button').forEach(el =>{
el.addEventListener('click', () =>{
digit_pressed(el.textContent);
});
});
function digit_pressed(digit) {
console.log("digit pressed: " + digit);
}

<button data-action="digit" class="button" id="1">1</button>
<button data-action="digit" class="button" id="2">2</button>
<button data-action="digit" class="button" id="3">3</button>

参考:

• querySelectorAll
• addEventListener
• textContent