uncaught typeerror cannot read property of null (reading 'queryselector')

Question

I am trying to hide the current page then transition from to the next one but I keep getting this error. Ive tried everything but it keeps saying uncaught typeerror cannot read property of null (reading '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>

Here is the 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*/

And the JS code im trying to run

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

Any help would be greatly appreciated. Also if you could sort of guide me on creating the sever side of the tic tac toe game that would be really helpful

Answer 1

It looks like you're including your <script src="TicTacToe.js"></script> tag before the DOM has loaded. That means lines like selectXBtn = selectBox.querySelector(".playerX") , which execute immediately, will fail because the DOM has not yet loaded.

You can either move selectXBtn and selectOBtn into the global namespace (and declare them var ) and initialize them in the window.onload handler, or just move your <script> tag to just before the </body> tag.

Also, why are you using vanilla JS for DOM manipulation when you're including the jQuery library which makes the syntax simpler?

uncaught typeerror cannot read property of null (reading 'queryselector')

Question

1 answers

solution1
0 2021-12-03 18:39:54

uncaught typeerror cannot read property of null (reading 'queryselector')

Question

1 answers

solution1 0 2021-12-03 18:39:54

solution1
0 2021-12-03 18:39:54