通过类名获取被点击按钮的id，不使用jquery

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。
我的 JavaScript 代码如下：

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

- Ekramul Hoque

Answer 1

document.getElementsByClassName 返回一个 DOM 对象列表。在一组 html 元素上应用 .onclick 将不起作用，虽然不会抛出错误，但你将无法看到预期的结果。

尝试这样做：

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

See here: JSFiddle (jq)

- Saturnix

---

我知道如何在jQuery中通过类名查找ID。为什么我只使用jQuery来完成这个任务？ - Ekramul Hoque

我没有告诉你必须使用jQuery。我只是提供了两种解决方案让你自己决定。 - Saturnix

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

演示链接

- letiagoalves

---

我有两个按钮，所以我没有使用循环：var buttons = document.getElementsByClassName('cls_btn');buttons[0].addEventListener('click', function(){alert(this.id);});buttons[1].addEventListener('click', function() {alert(this.id);}) 在2021年仍然有效 - IT进展缓慢;) - Timo

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/

- Richard Dalton

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

- Voonic