javascript - 如何使用纯Javascript从点击事件的一组按钮中获取按钮的ID

Question

我正在尝试获取用于 DOM 操作的按钮的 ID。我有一组按钮，我只想获取被单击的按钮的 ID。我的代码是:-

  <div class="row mb-5" id="widthRow">
  <div class="col-md-12 mx-auto">
  <p class="text-info font-weight-bold">Width :-</p>
  <button class="btn btn-sm btn-success w" id="200">200px</button>
  <button class="btn btn-sm btn-success w" id="400">400px</button>
  <button class="btn btn-sm btn-success w" id="600">600px</button>
  <button class="btn btn-sm btn-success w" id="800">800px</button>
 </div>
 </div>

我尝试搜索堆栈溢出并得到了代码答案:-

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

但是当我在我的页面上使用它时，我收到错误:- /image/6ikyB.jpg .

注意:-(我也将此代码与 getElementsByClassName 一起使用。)

我也尝试搜索此错误。还有人说 DOM 在操作之前没有加载。所以，我添加了 defer 到脚本并添加了 window.addEventListener("DOMContentLoaded", function() {}

但没有任何帮助。请帮忙。提前致谢。

Answer 1

可能您正在 DOM 完全加载之前执行代码。您可以将代码放在正文的底部，也可以用 DOMContentLoaded 包裹代码。 :

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

请注意:如getElementsByTagName()返回 HTMLCollection ，它维护基于 0 的索引，您迭代循环的次数超过了按钮的长度，请更改 <=至< .

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    for (let i = 0; i < buttonsCount; i++) {
      buttons[i].onclick = function(e) {
        alert(this.id);
      };
    }
  });
</script>


<div class="row mb-5" id="widthRow">
  <div class="col-md-12 mx-auto">
  <p class="text-info font-weight-bold">Width :-</p>
  <button class="btn btn-sm btn-success w" id="200">200px</button>
  <button class="btn btn-sm btn-success w" id="400">400px</button>
  <button class="btn btn-sm btn-success w" id="600">600px</button>
  <button class="btn btn-sm btn-success w" id="800">800px</button>
 </div>
 </div>