您如何使用一个代码块来定位网站上的所有 类？ （没有jquery）

Question

作为 class 工作的一部分，我一直在开发一款游戏，并且 运行 遇到了问题。问题是代码只影响一个按钮。我在两个“.restart”按钮上使用以下内容来重新加载浏览器....

//Reload Page
document.querySelector('.restart').addEventListener('click', function () {
    location.reload();
});

顶部有一个重新启动按钮（类似于 header）。另一个在模态中。 Modal 首先出现在 HTML 中。我是 99.9% 这就是第二个被跳过的原因。我试过使用 document.querySelectorAll....，但是我得到的是 Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function，但都不起作用。我如何使用一个片段来控制所有与 Javascript 相同的 classes？下面是游戏的代码笔...

https://codepen.io/AB3D/pen/xJWMpd

Answer 1

发生这种情况是因为 querySelectorAll() returns 一个元素数组。
解决方案是遍历这些元素并将事件附加到每个元素。

<button class="restart">Button 1</button>
<button class="restart">Button 2</button>
<button class="restart">Button 3</button>
<script>
  var elements = document.querySelectorAll(".restart");
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click", function() {
      location.reload();
    });
  }
</script>

由于您使用 class 名称作为选择器，您也可以使用 getElementsByClassName("restart") 作为替代方法，此方法也是 returns 一个元素数组。