未捕获的类型错误无法读取 null 的属性（读取“查询选择器”）
Posted
技术标签:
【中文标题】未捕获的类型错误无法读取 null 的属性（读取“查询选择器”）【英文标题】：uncaught typeerror cannot read property of null (reading 'queryselector') 【发布时间】：2022-01-10 02:34:48 【问题描述】：我试图隐藏当前页面，然后从下一个页面转换，但我不断收到此错误。我已经尝试了所有方法，但它一直说未捕获的类型错误无法读取 null 的属性（读取 'queryselector'）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> Tic Tac Toe </title>
<link rel="stylesheet" type="text/css" href="TicTacToe.css" title="style" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="TicTacToe.js"></script>
</head>
<body>
<!---Startpage--->
<div class="content">
<header><h2>Tic Tac Toe</h2>
<div class="Begin">
<h3>Play the game, Click <span>START</span> to begin</h3>
</div>
</header>
<div class="game-board">
<div class="box">X</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">X</div>
<div class="box">O</div>
<div class="box">O</div>
<div class="box">X</div>
<div class="box">X</div>
</div>
<div class="options">
<button class="Start">Start Game </button>
<button class="Exit"> Exit Game</button>
</div>
</div>
<!---Select your player--->
<div class="Select-box">
<header> Tic Tac Toe </header>
<div class="main">
<div class="title">Select who you want to play as </div>
<div class="selectoptions">
<button class="playerX">Player X's</button>
<button class="playerO"> Player O's</button>
</div>
</div>
</div>
<!---Select between option--->
<div class="Playerbox">
<header> Tic Tac Toe </header>
<div class="main">
<class class="title">Who are you playing against?</div>
<div class="playoptions">
<button class="Player">Player vs Player</button>
<button class="Machine"> Player vs Computer</button>
</div>
</div>
</div>
</body>
</html>
这是css
*
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
body
background: lightcoral;
/*Beginning of start page */
h2
text-align: center;
color: white;
white-space: nowrap;
h3
text-align: center;
color: white;
white-space: nowrap;
.content
position: absolute;
top: 25%;
left: 40%;
transform: translate(-25%, -40%);
padding: 20px 25px 25px;
border-radius:5px;
transition: all 0.3 ease;
display: none;
.game-board
width: 450px;
height: 450px;
margin: 0 ;
padding-top: 50px;
background-color: lightcoral;
color: #fff;
border: 2px solid white;
border-radius: 10px;
border-top: 50px;
border-left: 50px;
border-right: 50px;
display: grid;
grid-template: repeat(3, 2fr) / repeat(3, 2fr);
.box
border: 2px solid white;
border-radius: 2px;
font-family: Helvetica;
font-weight: bold;
font-size: 4em;
display: flex;
justify-content: center;
align-items: center;
.Start
display: inline-block;
padding: 15px 15px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: coral;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin: 0;
position: absolute;
top: 99%;
left: 19%;
.Start:hover background-color: #3e8e41
.Start:active
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
.Exit
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: coral;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
margin: 0;
position: absolute;
top: 99%;
left: 55%;
.Exit:hover background-color: red
.Exit:active
background-color: red ;
box-shadow: 0 5px #666;
transform: translateY(4px);
/*End of start page*/
/*Start of player selection page*/
.Select-box
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px 25px 25px;
border-radius: 5px;
max-width: 330px;
width: 100%;
transition: all 0.3 ease;
.Select-box .hide
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%)scale(0.9);
.Select-box header
font-size: 24px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid whitesmoke;
.Select-box .title
font-size: 18px;
font-weight: 500;
margin: 20px 0;
.Select-box .selectoptions
display: flex;
width: 100%;
.selectoptions button
width: 100%;
font-size: 19px;
font-weight: 500;
padding: 8px 0;
border: none;
outline: none;
background-color: lightsalmon;
border-radius: 5px;
color: white;
cursor: pointer;
transition: all 0.4s ease;
.selectoptions button:hover
transform:scale(0.96);
.selectoptions button.playerX
margin-right: 7px;
.selectoptions button.playerO
margin-right: 7px;
/*End of player selection page*/
/*Start of oponent selection page*/
.Playerbox
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px 25px 25px;
border-radius: 5px;
max-width: 330px;
width: 100%;
display: none;
.Playerbox header
font-size: 24px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid whitesmoke;
.Playerbox .title
font-size: 18px;
font-weight: 500;
margin: 20px 0;
.Playerbox .playoptions
display: flex;
width: 100%;
.playoptions button
width: 100%;
font-size: 15px;
font-weight: 500;
padding: 8px 0;
border: none;
outline: none;
background-color: lightsalmon;
border-radius: 5px;
color: white;
cursor: pointer;
transition: all 0.4s ease;
.playoptions button:hover
transform:scale(0.96);
.playoptions button.Player
margin-right: 4px;
.playoptions button.Machine
margin-right: 4px;
/*End of oponent selection page*/
我正在尝试运行的 JS 代码
const selectBox = document.querySelector(".Select-box"),
selectXBtn = selectBox.querySelector(".playerX"),
selectOBtn = selectBox.querySelector(".playerO");
window.onload = () =>// once our window is loaded
selectOBtn.onclick = () =>
selectBox.classList.add("hide");//hide the select box on playerx
任何帮助将不胜感激。另外，如果您能指导我创建井字游戏的服务器端，那将非常有帮助
【问题讨论】：
【参考方案1】：看起来您在 DOM 加载之前包含了 <script src="TicTacToe.js"></script> 标记。这意味着像 selectXBtn = selectBox.querySelector(".playerX") 这样的行会立即执行，因为 DOM 尚未加载，所以会失败。
您可以将selectXBtn 和selectOBtn 移动到全局命名空间中（并声明它们var）并在window.onload 处理程序中初始化它们，或者只是将<script> 标记移动到@987654328 之前@标签。
另外，当您包含使语法更简单的 jQuery 库时，为什么还要使用 vanilla JS 进行 DOM 操作？
【讨论】：
以上是关于未捕获的类型错误无法读取 null 的属性（读取“查询选择器”）的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取 null 的属性“getContext”
为啥我会收到此错误：未捕获的类型错误：无法读取 null 的属性 'classList'
未捕获的类型错误：在输入单击时无法读取 null 的属性“样式”