如何使用一個代碼塊來定位網站上的所有類？ （沒有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")作為替代，此方法還返回一個元素數組。