[英]How to get one JavaScript function to get the value of the html button that called it for multiple buttons
I am creating a calculator using HTML, CSS and JavaScript.我正在使用 HTML、CSS 和 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 按钮的值,现在单击该按钮作为警报,为此我尝试使用单个 JavaScript function 按钮的值返回。
HTML Code: 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 Code: JavaScript 代码:
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.任何帮助将不胜感激,如果 HTML 有点乱,我提前道歉。
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>
Try this html code:试试这个 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 code: JavaScript 代码:
function display_num(num) {
alert(num)
}
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.