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

Question

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

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

一个重启按钮在顶部（就像一个标题）。 另一个是在模态中。 模态首先出现在 HTML 中。 我是 99.9% 这就是为什么第二个被跳过的原因。 我试过使用document.querySelectorAll....但是我得到一个Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function ，也都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")作为替代，此方法还返回一个元素数组。