Document.queryselector gibt einen Nullwert zurück ⇐ HTML

[Anonymous]

Ich erstelle gerade ein Tic-Tac-Toe-Spiel mit HTML, CSS und Vanilla JS und habe eine Einstellungsschaltfläche mit der ID „mode“ und der Klasse „settings-button“, um zwischen Spieler vs. Spieler und Spieler vs. CPU umzuschalten (siehe Code unten).
Wenn ich document.querySelector für die Klasse der Schaltfläche ausführe, gibt es einen Nullwert zurück, was wiederum dazu führt, dass die Eventlistener-Zeile einen Fehler auslöst (Uncaught TypeError: Die Eigenschaft „addEventListener“ von null kann nicht gelesen werden.
Ich habe versucht, document.getElementById zu verwenden und meinen gesamten Code mit beiden Dokumentmethoden in einen window.onload-Block einzufügen, aber bei allen Szenarios ist das gleiche Problem aufgetreten. Zuerst dachte ich, es könnte ein Problem mit der WLAN-Verbindung sein, da ich für dieses Projekt an repl.it arbeite, aber ich habe andere Projekte überprüft, die ähnlichen Code haben, und sie schienen alle gut zu funktionieren.
Ich habe auch versucht, document.querySelectorAll zu verwenden, und es gibt eine leere Knotenliste zurück.
Was kann ich tun, um das zu beheben?

Code: Select all

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

let cpu = false;

function switchMode() {
cpu = !cpu;
this.textContent = cpu ? modeText[1] : modeText[0];
}

modeButton.addEventListener('click',switchMode);

Code: Select all

Player vs Player