document.queryselector returns 空值

Question

我目前正在使用 HTML、CSS 和 Vanilla JS 构建一个井字游戏，我有一个 ID 为 'mode' 和 class 的设置按钮'settings-button' 在玩家对玩家和玩家对 cpu 之间切换（见下面的代码）。

当我运行 document.querySelector 在按钮的 class 上时，它 returns 一个空值，这反过来导致 eventlistener 行引发错误（Uncaught TypeError : 无法读取属性 'addEventListener' of null).

我尝试过使用 document.getElementById 并将我的所有代码放入 window.onload 块中，这两种文档方法，但我在所有情况下都遇到了同样的问题。起初我认为这可能是 wifi 连接问题，因为我正在为这个项目工作 repl.it，但我检查了其他具有类似代码的项目，它们似乎都工作正常。

我应该怎么做才能解决这个问题？

编辑：我也尝试过使用 document.querySelectorAll，它 returns 是一个空节点列表。

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');

document.queryselector returns 空值

document.queryselector returns null value

html

javascript

dom

addeventlistener

htmlbutton