javascript - 通过 JavaScript 将 onclick 与多个按钮结合使用

Question

在我的长的多页 HTML 文档中，我想包含多个看起来相同且执行相同操作的按钮 (location.reload();)。出于不重复代码的想法，我想制作一个适用于所有这些的 onclick 事件。但我不知道怎么办。

我尝试给它们提供相同的“reloadButton”.class 而不是 id，例如 <button class="reloadButton">Reload</button> 。然后我尝试使用var reload = documents.getElementsByClassName("reloadButton"); 。

但我不知道接下来该做什么。尝试类似的东西 reload.onclick = function () { location.reload(); }似乎不起作用。

当它附加到 onclick 事件时，我不确定如何使用 for 循环来遍历所有类似数组的 HTMLCollection。

这只是纯 JavaScript，我的专业水平也是纯初学者。因此，如果您能够在脑海中对此进行解释，或者您可以链接一个以我可能能够理解的水平解释这一点的网站，我会很高兴。谢谢!

Answer 1

更新版本

window.addEventListener("load", function() { // when the page has loaded
  document.getElementById("NearestStaticContainerForButtons").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("reloadButton")) {
      e.preventDefault(); // stop the button if not type=button 
      location.reload();
    }
  });
});

旧版本

普通 JS:

window.onload=function() { // when the page has loaded
  var bt = document.querySelectorAll(".reloadButton"); // get all buttons with the class
  for (var i=0;i<bt.length;i++) { // newer browsers can use forEach
    bt[i].onclick=function() { // assign anonymous handler
      location.reload();
    }
  }
}

或者使用命名函数

function reloadPage() {
  location.reload();
}
window.onload=function() { // when the page has loaded
  var bt = document.querySelectorAll(".reloadButton"); // get all buttons with the class
  for (var i=0;i<bt.length;i++) { // newer browsers can use forEach
    bt[i].onclick=reloadPage;
  }
}