如何使用纯 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);

        };

    }

    });

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

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

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

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