javascript 在没有jquery的情况下通过类名获取点击按钮的id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19092219/
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
Get clicked button's id by class name without jquery
提问by Ekramul Hoque
I don't want to use jquery for this small task.
我不想将 jquery 用于这个小任务。
HTML
HTML
<form action="" method="post" >
<input type="button" id="btn_1" class="cls_btn" value="Click Me" />
<input type="button" id="btn_2" class="cls_btn" value="Click Me" />
<input type="button" id="btn_3" class="cls_btn" value="Click Me" />
</form>
javascript
javascript
I want id of button when it clicked.
my js code looks like
单击时我想要按钮的 id。
我的 js 代码看起来像
<script >
document.getElementsByClassName('cls_btn').onclick = function(){
alert(this.id);
};
</script>
采纳答案by letiagoalves
getElementsByClassNamereturns a list of DOM elements so you need to loop it and add an event listener to each:
getElementsByClassName返回一个 DOM 元素列表，因此您需要循环它并为每个元素添加一个事件侦听器：
var buttons = document.getElementsByClassName('cls_btn');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
alert(this.id);
});
}
回答by Saturnix
document.getElementsByClassNamereturns a list of DOM objects. Applying .onclickto a collection of html items results in nothing. No error is thrown but you'll not see the expected result anyway.
document.getElementsByClassName返回一个 DOM 对象列表。应用于.onclickhtml 项目的集合不会产生任何结果。不会抛出任何错误，但无论如何您都不会看到预期的结果。
Try this:
试试这个：
var buttons = document.getElementsByClassName('cls_btn');
for (var i = 0; i < buttons.length; i++){
buttons[i].onclick = function(){ alert(this.id) };
}
See here: JSFiddle
见这里：JSFiddle
I don't want to use jquery for this small task.
我不想将 jquery 用于这个小任务。
Note that jQuery can handle the same loop for you. No need to iterate over the list: just provide the selector and it will be done for you.
请注意，jQuery 可以为您处理相同的循环。无需遍历列表：只需提供选择器，它就会为您完成。
$('.cls_btn').click(function() {
console.log($(this).attr('id'));
});
See here: JSFiddle (jq)
见这里：JSFiddle（jq）
回答by Richard Dalton
getElementsByClassNamereturns an array. You need to loop over this to add the onlcick handler to each item:
getElementsByClassName返回一个数组。您需要遍历它以将 onlcick 处理程序添加到每个项目：
var buttons = document.getElementsByClassName('cls_btn');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(){
alert(this.id);
};
}
Example - http://jsfiddle.net/RjUvQ/
回答by Shadow
you can use this | No jquery Demo
你可以用这个| 没有 jquery演示
window.onload=function(){
var ele = document.getElementsByClassName('cls_btn');
for(var i=0;i<ele.length;i++)
{
addEventHandler(ele[i],'click',doWhatever);
}
}
function addEventHandler(elem,eventType,handler) {
if (elem.addEventListener) // for rest of browsers
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent) // for IE
elem.attachEvent ('on'+eventType,handler);
}
function doWhatever()
{
// do whaterver you want
alert(this.id);
}
