JavaScript – onClick获取单击button的ID

如何find被点击的button的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() { } 

12 Solutions collect form web for “JavaScript – onClick获取单击button的ID”

您需要发送ID作为function参数。 像这样做:

 <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您可以在您的function中使用。 在这里看到它的行动。

一般来说,如果将代码和标记分开,事情会更容易组织起来。 定义所有的元素,然后在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> 

(我认为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); } } 

但是这要求你对古怪的事件模型比较舒服。

 <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').click(function(){ var clickedID = this.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了。

如何在没有内嵌JavaScript的情况下做到这一点

通常build议避免使用内联JavaScript,但很less有如何执行此操作的示例。
这是我将事件附加到button的方式。
对于推荐的方法与简单的onClick属性进行比较,我不完全满意。

只有现代浏览器

 <!DOCTYPE html> <html> <head> <script> (function(doc){ var hasClass = function(el,className) { return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1; } 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> 

您可以在文档准备就绪之前运行此操作,单击button将起作用,因为我们将事件附加到文档。

这是一个jsfiddle
由于一些奇怪的原因, insertHTML函数在我的所有浏览器中都能正常工作,它仍然不起作用。

如果你不介意它的缺点,你可以随时用document.writereplaceinsertHTML

 <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); } 

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

用纯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> $('.clickMe').live('click',function(){ var clickedID = this.id; }); 

button1button2button3

 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; 
  • 使用“X-UA-Compatible”模拟IE8的IE8,但不适用于IE9
  • 如何configurationemacs来编辑包含Javascript的HTML文件?
  • Div Z-Index问题与Flash电影
  • 使用JavaScript将图像保存到用户的磁盘
  • jquery UI工具提示不支持HTML内容
  • 用Javascript设置HTML <span>的内容
  • 如何禁用Web表单域/input标签上的浏览器自动完成?
  • AngularJS:从string插入HTML
  • 在div中的中间和中间alignment图像
  • websocket是否安全?
  • Zalgo文本如何工作?