javascript - 在没有 jquery 的情况下按类名获取单击按钮的 id

Question

我不想为这个小任务使用 jquery。

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

单击时我想要按钮的 id。
我的 js 代码看起来像

<script >
    document.getElementsByClassName('cls_btn').onclick = function(){
        alert(this.id);
    };
</script>

Answer 1

document.getElementsByClassName返回一个 DOM 对象列表。应用于.onclickhtml 项目的集合不会产生任何结果。不会引发错误，但无论如何您都不会看到预期的结果。

试试这个：

var buttons = document.getElementsByClassName('cls_btn');

for (var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){ alert(this.id) };
}

见这里：JSFiddle

---

我不想为这个小任务使用 jquery。

请注意，jQuery 可以为您处理相同的循环。无需遍历列表：只需提供选择器，它就会为您完成。

$('.cls_btn').click(function() {
  console.log($(this).attr('id'));
});

见这里：JSFiddle (jq)

Answer 2

getElementsByClassName返回一个 DOM 元素列表，因此您需要循环它并为每个元素添加一个事件侦听器：

var buttons = document.getElementsByClassName('cls_btn');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        alert(this.id);
    });
}

工作演示

Answer 3

getElementsByClassName返回一个数组。您需要遍历它以将 onlcick 处理程序添加到每个项目：

var buttons = document.getElementsByClassName('cls_btn');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function(){
        alert(this.id);
    };
}

示例 - http://jsfiddle.net/RjUvQ/

Answer 4

你可以用这个| 没有 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);   
}