document.queryselector 返回 null 值

Question

我目前正在使用 HTML、CSS 和 Vanilla JS 構建井字游戲，並且我有一個設置按鈕，ID 為“模式”和 class ）。

當我在按鈕的 class 上運行 document.querySelector 時，它返回一個 null 值，這反過來會導致 eventlistener 行引發錯誤（Uncaught TypeError: Cannot read property 'addEventListener' of null）。

我嘗試使用 document.getElementById 並將我的所有代碼放入 window.onload 塊中，並使用兩種文檔方法，但在所有情況下我都遇到了同樣的問題。 起初我認為這可能是 wifi 連接問題，因為我正在為這個項目開發 repl.it，但我檢查了其他具有類似代碼的項目，它們似乎都工作正常。

我也嘗試過使用 document.querySelectorAll，它返回一個空節點列表。

我應該怎么做才能解決這個問題？

 const modeButton = document.querySelector('settings-button'); let cpu = false; function switchMode() { cpu =;cpu. this?textContent = cpu: modeText[1]; modeText[0]. } modeButton,addEventListener('click';switchMode);

 <button id="mode" class="settings-button">Player vs Player</button>

Answer 1

您正在使用settings-button作為 class 而不是.settings-button 。 在 querySelector 方法中的 class 名稱之前添加 (.)

const modeButton = document.querySelector('.settings-button');