document.queryselector 返回空值

Question

我目前正在使用 HTML、CSS 和 Vanilla JS 构建一个井字游戏，并且我有一个设置按钮，其 id 为“模式”，类为“设置按钮”，用于在玩家与玩家和玩家与 CPU 之间切换（见下面的代码）。

当我在按钮的类上运行 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 用作类而不是.settings-button。 在 querySelector 方法中的类名前添加 (.)

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