onClick 获取被点击按钮的ID

Question

如何找到被点击的按钮的id？

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
}

原文由 Bin Chen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要将 ID 作为函数参数发送。像这样做：

 <button id="1" onClick="reply_click(this.id)">B1</button>
 <button id="2" onClick="reply_click(this.id)">B2</button>
 <button id="3" onClick="reply_click(this.id)">B3</button>

 <script type="text/javascript">
 function reply_click(clicked_id)
 {
 alert(clicked_id);
 }
 </script>

这会将 ID this.id 作为 clicked_id 发送，您可以在函数中使用它。 在这里查看它的实际应用。

原文由 shamittomar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一般来说，如果将代码和标记分开，事情会更容易组织起来。定义所有元素，然后在 JavaScript 部分中，定义应对这些元素执行的各种操作。

当调用事件处理程序时，它会在被单击的元素的上下文中调用。因此，标识符 this 将引用您单击的 DOM 元素。然后您可以通过该标识符访问元素的属性。

例如：

 <button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>

<script type="text/javascript">
var reply_click = function()
{
    alert("Button clicked, id "+this.id+", text"+this.innerHTML);
}
document.getElementById('1').onclick = reply_click;
document.getElementById('2').onclick = reply_click;
document.getElementById('3').onclick = reply_click;
</script>

原文由 Jason LeBrun 发布，翻译遵循 CC BY-SA 3.0 许可协议