Estoy siguiendo un video para hacer un juego tipo Jeopardy. una vez que llego a los elementos, arroja un error: no se pueden leer las propiedades de nulo (leyendo 'querySelector').
No estoy seguro de dónde está mi error. Mi tablero está definido en mi html, no veo errores ortográficos pero aún así el error. Esta es la parte HTML a continuación.
<body> <div class="app"> <header class="top-header"> <h1>Trivia Game Show</h1> <p class="score">Score <span class="score-count"></span></p> </header> <!--container for the board--> <div class="board"></div> <!--categories get injected here-->entonces en mi JS tengo esto
//elements this.boardElement = element.querySelector(".board"); this.scoreCountElement = element.querySelector(".score-count"); this.formElement = element.querySelector("form"); this.inputElement = element.querySelector("input[name=user-answer]"); this.modalElement = element.querySelector(".card-modal"); this.clueTextElement = element.querySelector(".clue-text"); this.resultElement = element.querySelector(".result"); this.resultTextElement = element.querySelector(".result_correct-answer-text"); this.successTextElement = element.querySelector(".result_success"); this.failTextElement = element.querySelector(".result_fail");Estoy confundido sobre dónde está mi error. Tengo mi .board definido en mi Html pero me dice que es Nulo. ¿Cómo soluciono este error? tia!!
Aquí es donde se declaró
class TriviaGameshow{ constructor(element, options={}) { this.useCategoryIds = options.useCategoryIds || [1892, 4483, 88, 218]; this.categories = []; this.clues = {}; this.currentClue = null; this.score = 0; this.currentClue = null; this.score = 0; this.boardElement = document.querySelector(".board"); this.scoreCountElement = element.querySelector(".score-count"); this.formElement = element.querySelector("form"); this.inputElement = element.querySelector("input[name=user-answer]"); this.modalElement = element.querySelector(".card-modal"); this.clueTextElement = element.querySelector(".clue-text"); this.resultElement = element.querySelector(".result"); this.resultTextElement = element.querySelector(".result_correct-answer-text"); this.successTextElement = element.querySelector(".result_success"); this.failTextElement = element.querySelector(".result_fail"); }}