javascript 获取刚刚单击的按钮的 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11454142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the id of a button just clicked
提问by Kyle Smith
I'm trying to create a calculator webapp using JS and I'm running into some problems. I looked at other open threads and tried that code but it didn't seem to work. I'm currently just trying to log the ID of the button that was pressed, but when I press a button all I get is "undefined"back. Here's my code:
我正在尝试使用 JS 创建一个计算器网络应用程序，但遇到了一些问题。我查看了其他打开的线程并尝试了该代码，但似乎没有用。我目前只是想记录按下的按钮的 ID，但是当我按下一个按钮时，我得到的一切又"undefined"回来了。这是我的代码：
<html>
<head>
<title>Calculator</title>
</head>
<body>
<p id="text">
<table border="0" id="table">
<tr>
<td><input type="button" id="one" value="1" onClick="calculate();"></td>
<td><input type="button" id="two" value="2" onClick="calculate();"></td>
<td><input type="button" id="three" value="3" onClick="calculate();"></td>
</tr>
<tr>
<td><input type="button" id="four" value="4" onClick="calculate();"></td>
<td><input type="button" id="five" value="5" onClick="calculate();"></td>
<td><input type="button" id="six" value="6" onClick="calculate();"></td>
</tr>
<tr>
<td><input type="button" id="seven" value="7" onClick="calculate();"></td>
<td><input type="button" id="eight" value="8" onClick="calculate();"></td>
<td><input type="button" id="nine" value= "9" onClick="calculate();"></td>
</tr>
<tr>
<td> </td>
<td><input type="button" id="zero" value="0" onClick="calculate();"></td>
</tr>
</table>
<script>
function calculate(){
console.log(this.id);
}
</script>
</body>
</html>
回答by Engineer
Try like this:
像这样尝试：
function calculate(){
var e = window.event,
btn = e.target || e.srcElement;
alert(btn.id);
}
Explanation:
解释：
window.eventholds an information about last occured event. In your case , it's 'click'event. You can retrieve the DOM Element,which is being clicked, from the eventobject.The targetor srcElementproperty (depends on type of the browser) represents that DOM Element.
window.event保存有关上次发生的事件的信息。在你的情况下，这是'click'事件。您可以从对象中检索DOM Element正在单击的event。targetorsrcElement属性（取决于浏览器的类型）表示DOM Element。
回答by TWickz
<script type="text/javascript">
function calc(e) {
console.log(e.id);
}
</script>
<input type="button" id="btn" onclick="calc(this)" />
You need put a lot more effort into self study :-) Knowledge is never gained unless an effort is made.
你需要在自学上付出更多的努力:-) 除非付出努力，否则知识永远不会获得。
回答by Florent
You can use event.targetto get the element.
您可以使用event.target来获取元素。
<input type="button" id="one" value="1" onclick="calculate(event);">
<script>
function calculate(event) {
console.log(event.target.id);
}
</script>
回答by Ryan Beaulieu
If your hard writing them in as it appears you are above, you could just pass the id value as a parameter to the function
如果您像上面那样努力编写它们，则可以将 id 值作为参数传递给函数
onClick="calculate(one)";
onClick="calculate(two)";
onClick="calculate(three)";
etc...
等等...
It's not terrible efficient but should work for your case. Then your function can be something like:
这不是很有效，但应该适用于您的情况。那么你的函数可以是这样的：
function calculate(number){
alert(number);
}
回答by Vivek Chandra
Its simple
这很简单
onclick=alert(this.id)
or,in your case :
或者，在您的情况下：
onclick=calculate()
Script:
脚本：
function calculate(){
alert(this.id)
//this.id - hold the value of the id of the button just click
}
