【发布时间】：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
}
}
任何帮助将不胜感激。另外，如果您能指导我创建井字游戏的服务器端，那将非常有帮助
【问题讨论】：
标签： javascript html jquery css tic-tac-toe