I am following a video to make a Jeopardy type game. once I get down to the elements it throws an error : Cannot read properties of null (reading 'querySelector').
I'm not sure where my mistake is . My board is defined in my html, I see no spelling errors yet still the error. This is the HTML portion below.
<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-->
then in my JS I have this
//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");
I'm confused on where my error is. I have my .board defined in my Html yet it tells me its Null? how do I fix this error ? TIA !!
This is where it was declared
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");
}
}