onClick获取被点击按钮的ID

如何找到正在点击的按钮的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()
{
}
1682086 次浏览
小开
最佳答案

您需要将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，你可以在你的函数中使用它。 . .

小开

(我认为id属性需要以字母开头。可能是错的。)

你可以选择事件委托……

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


function reply_click(e) {
e = e || window.event;
e = e.target || e.srcElement;
if (e.nodeName === 'BUTTON') {
alert(e.id);
}
}

.．.但这要求您对古怪的事件模型相对熟悉。

小开

一般来说，如果将代码和标记分开，事情就更容易保持有序。定义所有元素，然后在JavaScript部分定义应该在这些元素上执行的各种操作。

当调用事件处理程序时，它是在所单击元素的上下文中调用的。所以，标识符这将指向你点击的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>
小开

按钮1按钮2按钮3

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;
小开 
<button id="1" onClick="reply_click(this)"></button>
<button id="2" onClick="reply_click(this)"></button>
<button id="3" onClick="reply_click(this)"></button>


function reply_click(obj)
{
var id = obj.id;
}
小开 
 <button id="1"class="clickMe"></button>


<button id="2" class="clickMe"></button>


<button id="3" class="clickMe"></button>






$('.clickMe').live('click',function(){


var clickedID = this.id;


});
小开

使用纯javascript，你可以做到以下几点:

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i < buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
alert(this.id);
};
}​

检查它JsFiddle

小开 
<button id="1" class="clickMe"></button>
<button id="2" class="clickMe"></button>
<button id="3" class="clickMe"></button>


<script>
$('.clickMe').click(function(){
alert(this.id);
});
</script>
小开

如何做到这一点没有内联JavaScript或外部库

通常建议避免使用内联JavaScript，但很少有示例说明如何做到这一点。
下面是我将事件附加到按钮的方法。
我不太满意推荐的方法与简单的onClick属性相比多长时间

现代浏览器(2015+)

  • 在文件完成加载之前进行操作。
  • 很能干的人。
  • 把JS和HTML分开。
  • JS在<head> . JS中

const Listen = (doc) => {
return {
on: (type, selector, callback) => {
doc.addEventListener(type, (event)=>{
if(!event.target.matches(selector)) return;
callback.call(event.target, event);
}, false);
}
}
};




Listen(document).on('click', '.btn', function (e) {
let div = document.createElement("div");
div.innerHTML = "click " + e.target.id + "!";
document.body.appendChild(div);
});
<button id="b1" class="btn">Button 1</button>
<button id="b2" class="btn">Button 2</button>
<button id="b3">Do nothing</button>

仅限2014年浏览器

<button class="btn" id="b1">Button</button>
<script>
let OnEvent = (doc) => {
return {
on: (event, className, callback) => {
doc.addEventListener('click', (event)=>{
if(!event.target.classList.contains(className)) return;
callback.call(event.target, event);
}, false);
}
}
};




OnEvent(document).on('click', 'btn', function (e) {
window.console.log(this.id, e);
});


</script>

仅限2013年浏览器

<!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
var hasClass = function(el,className) {
return el.classList.contains(className);
}
doc.addEventListener('click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault();
doSomething.call(e.target, e);
}
});
})(document);


function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}


function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>


<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script>
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>


<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">


<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>


</body>
</html>

跨浏览器

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
var cb_addEventListener = function(obj, evt, fnc) {
// W3C model
if (obj.addEventListener) {
obj.addEventListener(evt, fnc, false);
return true;
}
// Microsoft model
else if (obj.attachEvent) {
return obj.attachEvent('on' + evt, fnc);
}
// Browser don't support W3C or MSFT model, go on with traditional
else {
evt = 'on'+evt;
if(typeof obj[evt] === 'function'){
// Object already has a function on traditional
// Let's wrap it with our own function inside another function
fnc = (function(f1,f2){
return function(){
f1.apply(this,arguments);
f2.apply(this,arguments);
}
})(obj[evt], fnc);
}
obj[evt] = fnc;
return true;
}
return false;
};
var hasClass = function(el,className) {
return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
}


cb_addEventListener(doc, 'click', function(e){
if(hasClass(e.target, 'click-me')){
e.preventDefault ? e.preventDefault() : e.returnValue = false;
doSomething.call(e.target, e);
}
});
})(document);


function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}


function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>


<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>


<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">


<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>


</body>
</html>

jQuery跨浏览器

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function($){
$(document).on('click', '.click-me', function(e){
doSomething.call(this, e);
});
})(jQuery);


function insertHTML(str){
var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
lastScript.insertAdjacentHTML("beforebegin", str);
}


function doSomething(event){
console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>


<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>


<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">


<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>


</body>
</html>

您可以在文档准备好之前运行它，单击按钮将工作，因为我们将事件附加到文档。

这是一个jsfiddle
由于某种奇怪的原因，insertHTML函数在其中不起作用，尽管它在我的所有浏览器中都有效

你总是可以用document.write替换insertHTML，如果你不介意它是缺点的话

<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>

来源:

小开

你可以简单地这样做:

<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/>
<script type="text/javascript">
function showId(obj) {
var id=obj;
alert(id);
}

小开

使用纯JAVASCRIPT: 我知道这有点晚了，但也许对未来的人有帮助:

在HTML部分:

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

在Javascipt控制器中:

function reply_click()
{
alert(event.srcElement.id);
}

这样，我们就不必在调用javascript函数时绑定Element的“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()
{
console.log(window.event.target.id)
}
小开

抱歉，这是一个很晚的回答，但如果你这样做的话，它真的很快:-

$(document).ready(function() {
$('button').on('click', function() {
alert (this.id);
});
});

这将获得单击的任何按钮的ID。

如果你想要在某个地方点击按钮的值，就把它们放在容器中

<div id = "myButtons"> buttons here </div>

并更改代码为:-

 $(document).ready(function() {
$('.myButtons button').on('click', function() {
alert (this.id);
});
});

我希望这对你们有帮助

小开

如果你不想将任何参数传递给onclick函数，只需使用event.target来获取被点击的元素:

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


function reply_click()
{
// event.target is the element that is clicked (button in this case).
console.log(event.target.id);
}
小开

这将记录被单击元素的id: addFields。

<button id="addFields" onclick="addFields()">+</button>


<script>


function addFields(){
console.log(event.toElement.id)
}


</script>
小开

这是对Prateek回答的改进——事件是通过参数传递的，因此reply_click不需要使用全局变量(目前还没有人提出这个变量)

function reply_click(e) {
console.log(e.target.id);
}
<button id="1" onClick="reply_click(event)">B1</button>
<button id="2" onClick="reply_click(event)">B2</button>
<button id="3" onClick="reply_click(event)">B3</button>

小开

虽然晚了8年多，但为了从(我的)HTML中获得动态生成的id，我使用了php循环的索引来增加按钮id。我将相同的索引连接到输入元素的ID，因此我最终得到ID ="tableview1"和按钮id="1"等等。

$tableView .= "<td><input type='hidden' value='http://".$_SERVER['HTTP_HOST']."/sql/update.php?id=".$mysql_rows[0]."&table=".$theTable."'id='tableview".$mysql_rows[0]."'><button type='button' onclick='loadDoc(event)' id='".$mysql_rows[0]."'>Edit</button></td>";

在javascript中，我将按钮单击存储在一个变量中，并将其添加到元素中。

function loadDoc(e) {
var btn = e.target.id;
var xhttp = new XMLHttpRequest();
var page = document.getElementById("tableview"+btn).value;
  

//other Ajax stuff
}
小开

第一种方法:使用this发送触发器元素

<button id="btn01" onClick="myFun(this)">B1</button>
<button id="btn02" onClick="myFun(this)">B2</button>
<button id="btn03" onClick="myFun(this)">B3</button>


<script>
function myFun(trigger_element)
{
// Get your element:
var clicked_element = trigger_element


alert(clicked_element.id + "Was clicked!!!");
}
</script>

通过这种方式发送一个类型为:HTMLElement的对象，并获得元素本身。您不需要关心元素是否有id或任何其他属性。它自己工作得很好。

第二种方法:使用this.id发送触发器元素id

<button id="btn01" onClick="myFun(this.id)">B1</button>
<button id="btn02" onClick="myFun(this.id)">B2</button>
<button id="btn03" onClick="myFun(this.id)">B3</button>


<script>
function myFun(clicked_id)
{
// Get your element:
var clicked_element = document.getElementById(clicked_id)


alert(clicked_id + "Was clicked!!!");
}
</script>

通过这种方式发送一个类型为:String的对象，你不会得到元素本身。所以在使用之前，您需要确保元素已经有一个id。

你不能自己发送元素id，比如onClick="myFun(btn02)"。它不是干净的代码，它使你的代码失去功能。

在你的情况下:

<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>

提交答案