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对象列表。将.onclick应用于html项的集合不会产生任何结果。不会抛出任何错误，但无论如何你都看不到预期的结果。

试试这个：

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

Working demo

Answer 3

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

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 Demo

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

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

HTML

的的javascript

4 个答案: