如何使用纯 Javascript 从单击事件的一组按钮中获取按钮的 id

debugcn 发表于 Dev

安吉特

我正在尝试获取用于 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);
        };
    }
    });

但是当我在我的页面上使用它时，出现错误：- https://imgur.com/a/cnLrVGp。

注意：-（我也将此代码与 getElementsByClassName 一起使用。）

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

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

马蒙

可能您正在 DOM 完全加载之前执行您的代码。您可以将代码放在正文的底部，也可以使用以下内容包装您的代码DOMContentLoaded：

该DOMContentLoaded事件触发时，最初的HTML文档已被完全加载和分析，而无需等待样式表，图片和子帧完成加载。

请注意：由于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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。