javascript - 您如何使用一个代码块来定位网站上的所有类？ (没有jquery)

Question

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

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

一个重启按钮在顶部(像标题一样)。另一个在模态中。 Modal 首先出现在 HTML 中。我是 99.9% 这就是第二个被跳过的原因。我试过使用 document.querySelectorAll....但是我得到一个 Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function 并且都不起作用.我怎样才能使用一个片段来控制所有相同的 Javascript 类？下面是游戏的代码笔...

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

Answer 1

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

<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>

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