Document.queryselector возвращает нулевое значение ⇐ Html

[Anonymous]

В настоящее время я создаю игру в крестики-нолики с помощью HTML, CSS и Vanilla JS, и у меня есть кнопка настроек с идентификатором 'mode' и классом 'settings-button' для переключения между игроком против игрока и игроком против процессора (см. код ниже).
Когда я запускаю document.querySelector в классе кнопки, он возвращает нулевое значение, что, в свою очередь, приводит к тому, что строка прослушивателя событий выдает ошибку (Uncaught) TypeError: невозможно прочитать свойство addEventListener со значением null).
Я пробовал использовать document.getElementById и поместить весь свой код в блок window.onload с помощью обоих методов документа, но во всех сценариях возникала одна и та же проблема. Сначала я подумал, что это может быть проблема с подключением к Wi-Fi, поскольку я работаю над 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);

Код: Выделить всё

Player vs Player

Подробнее здесь: https://stackoverflow.com/questions/628 ... null-value