无法读取 null \"querySelector\" 的属性，但该属性已定义？答案

【问题标题】：Cannot read properties of null "querySelector" but the property is defined?无法读取 null \"querySelector\" 的属性，但该属性已定义？
【发布时间】：2022-08-14 22:41:45
【问题描述】：

我正在关注一个视频来制作 Jeopardy 类型的游戏。一旦我深入了解它会引发错误的元素：无法读取 null 的属性（读取 \'querySelector\'）。

我不确定我的错误在哪里。我的板是在我的 html 中定义的，我没有看到拼写错误，但仍然是错误。这是下面的 HTML 部分。

  <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-->

然后在我的JS中我有这个

//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\");

我对我的错误在哪里感到困惑。我在我的 Html 中定义了我的 .board，但它告诉我它的 Null？我该如何解决这个错误？蒂亚！！

这是它被宣布的地方

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\");



}

}

在您提供的代码中，element 是什么？那就是null 的变量。首先，尝试将其更改为document，例如document.querySelector(\".board\")
好吧，我对此相当陌生，虽然我通常知道 document.query 通常会去那里，但我正在遵循教程并且据我所知，这是每次都引用没有 dom 查询的元素？该视频使用 API 。
这是 youtube 上视频的链接，信息位于时间标记 7:47.youtube.com/watch?v=fYMBkayHmUo&t=467s 感谢您的任何见解！非常赞赏
@svrbst 并不奇怪，querySelector 在没有通过选择器找到元素时返回 null。
根据您的 codepen，您将脚本包含在 <head> 中，因此 DOM 未完全解析，因此查询选择器中的 null。将脚本移动到正文末尾，添加defer 等

标签： javascript

【解决方案1】：

检查班级。或重新声明类

this.boardElement = document.querySelector(".board"); 如果执行此错误无法解决，只需复制“.board”类，然后粘贴即可。

【讨论】：