I am working on a game that includes a knockout tournament, each player are positioned randomly and I'm trying to give a random score to the non-human players that will be displayed next to their name. But I find myself with a Cannot set properties of null (setting 'innerHTML') error.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
main{
display:flex;
flex-direction:row;
}
.round{
display:flex;
flex-direction:column;
justify-content:center;
width:200px;
list-style:none;
padding:0;
}
.round .spacer{ flex-grow:1; }
.round .spacer:first-child,
.round .spacer:last-child{ flex-grow:.5; }
.round .game-spacer{flex-grow:1;}
/*
* General Styles
*/
body{
font-family:sans-serif;
font-size:small;
padding:10px;
line-height:1.4em;
}
li.game{
padding-left:20px;
}
li.game.winner{
font-weight:bold;
}
li.game span{
float:right;
margin-right:5px;
}
li.game-top{ border-bottom:1px solid #aaa; }
li.game-spacer{
border-right:1px solid #aaa;
min-height:40px;
}
li.game-bottom{
border-top:1px solid #aaa;
}
</style>
<script type="text/javascript">
window.onload = function(){
players = ['John Cena', 'Pikachu', 'Ronaldo', 'Spiderman', 'Sonic Hedghehog', 'Ben 10', 'Mike Tyson', 'Goku'];
for(i = 1; i <= 8; i++) {
var x = Math.floor(Math.random() * players.length);
//create variables p1 to p8
window['p'+i] = players[x];
//create variables p1_score to p8_score
window['p'+i+'_score'] = 0;
players.splice(x, 1);
}
document.getElementById('player1').innerHTML = p1;
document.getElementById('player2').innerHTML = p2;
document.getElementById('player3').innerHTML = p3;
document.getElementById('player4').innerHTML = p4;
document.getElementById('player5').innerHTML = p5;
document.getElementById('player6').innerHTML = p6;
document.getElementById('player7').innerHTML = p7;
document.getElementById('player8').innerHTML = p8;
while(p1_score<5&&p2_score<5){
if(Math.random()>=0.5){
p1_score = Math.floor(Math.random() * 6)+0.5;
}
else{
p1_score = Math.floor(Math.random() * 6);
}
if(Math.random()>=0.5){
p2_score = Math.floor(Math.random() * 6)+0.5;
}
else{
p2_score = Math.floor(Math.random() * 6);
}
}
document.getElementById('player1_score').innerHTML = p1_score;
document.getElementById('player2_score').innerHTML = p2_score;
}
</script>
</head>
<body>
<h1>Knockout Tournament</h1>
<main id="tournament">
<ul class="round round-1">
<li class="spacer"> </li>
<li id="player1" class="game game-top"><span id="player1_score">0</span></li>
<li class="game game-spacer"> </li>
<li id="player2" class="game game-bottom "><span id="player2_score">0</span></li>
<li class="spacer"> </li>
<li id="player3" class="game game-top"><span id="player3_score"></span></li>
<li class="game game-spacer"> </li>
<li id="player4" class="game game-bottom "><span id="player4_score"></span></li>
<li class="spacer"> </li>
<li id="player5" class="game game-top "><span id="player5_score"></span></li>
<li class="game game-spacer"> </li>
<li id="player6" class="game game-bottom"><span id="player6_score"></span></li>
<li class="spacer"> </li>
<li id="player7" class="game game-top "><span id="player7_score"></span></li>
<li class="game game-spacer"> </li>
<li id="player8" class="game game-bottom"><span id="player8_score"></span></li>
<li class="spacer"> </li>
</ul>
<ul class="round round-2">
<li class="spacer"> </li>
<li class="game game-top"><span></span></li>
<li class="game game-spacer"> </li>
<li class="game game-bottom "><span></span></li>
<li class="spacer"> </li>
<li class="game game-top "><span></span></li>
<li class="game game-spacer"> </li>
<li class="game game-bottom"><span></span></li>
<li class="spacer"> </li>
</ul>
<ul class="round round-3">
<li class="spacer"> </li>
<li class="game game-top"><span></span></li>
<li class="game game-spacer"> </li>
<li class="game game-bottom"><span></span></li>
<li class="spacer"> </li>
</ul>
</main>
</body>
</html>
I tested the random score feature with the first 2 players, a score was supposed to display next to their name. The error points to these two lines below:
document.getElementById('player1_score').innerHTML = p1_score;
document.getElementById('player2_score').innerHTML = p2_score;
I did search for posts about this specific error, and saw on other posts that usually the cause of this error is that the script didn't load before the page (body), so I tried the following solutions:
- Use window.onload to ensure the script loads first
- Move the script to the end of body
- Use setTimeout method
None of the above solutions worked. Help will be appreciated, thanks in advance.
