innerHTML not updating DIV

I want to have a dynamic page that displays whether a certain player is a real player or a computer based on url parameters. The parameters themselves work fine and the data is collected correctly, but the DIV tags I have aren't updating their text.

The issue is to do with declaring the variables p1 to p6, which are being shown as null in the console. I'm unsure on why this is since I'm even calling the whole thing inside the onload function. The console.log calls at the end of each case are also working fine.

Code Snippet

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

window.onload = function() {
var p1 = document.getElementById("p1"),
p2 = document.getElementById("p2"),
p3 = document.getElementById("p3"),
p4 = document.getElementById("p4"),
p5 = document.getElementById("p5"),
p6 = document.getElementById("p6");
var url = window.location.href,
params = url.split('?')[1].split('&'),
data = {},
tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
switch (data.players) {
case 1:
p2.innerHTML = "Computer";
p3.innerHTML = "Computer";
p4.innerHTML = "Computer";
p5.innerHTML = "Computer";
p6.innerHTML = "Computer";
console.log(data.players)
break;
case 2:
p3.innerHTML = "Computer";
p4.innerHTML = "Computer";
p5.innerHTML = "Computer";
p6.innerHTML = "Computer";
console.log(data.players)
break;
case 3:
p4.innerHTML = "Computer";
p5.innerHTML = "Computer";
p6.innerHTML = "Computer";
console.log(data.players)
break;
case 4:
p5.innerHTML = "Computer";
p6.innerHTML = "Computer";
console.log(data.players)
break;
case 5:
p6.innerHTML = "Computer";
console.log(data.players)
break;
default:
console.log(data.players)
break;
}
}

<!-- language: lang-html -->

<div class="wrapper">
<div></div>
<div id="p1">p1</div>
<div id="p2">p2</div>
<div></div>
<div id="p3">p3</div>
<div></div>
<div></div>
<div id="p4">p4</div>
<div></div>
<div id="p5">p5</div>
<div id="p6">p6</div>
<div></div>
</div>

<!-- end snippet -->

I cleaned up your code while keeping my answer understandable.

First, you will want to use DOMContentLoaded instead of window.onload as DOMContentLoaded will be triggered after the HTML is loaded/parsed.

Next, getting rid of ids is the best long term option. They can be difficult to work with and have more restrictions.

I'm using URL searchParams to parse the query string instead of splitting it.

Using Number I convert the string to a number that is returned from the query string.

I have some double checking functionality to verify that the variable passed is in the proper range.

Then I simply loop through the the starting player number and go to the end of the length of the player divs.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

addEventListener("DOMContentLoaded", (event) => {
//const url = new URL(window.location.href);
const url = new URL("https://example.com/?players=4");
let players = Number(url.searchParams.get("players"));
const playerDivs = document.querySelectorAll("[data-player]");
if(players > playerDivs.length)players = playerDivs.length
else if(players <= 0)players = 1;
for(let c = players;c<playerDivs.length;c++){
playerDivs[c].innerHTML = "COMPUTER";
}
});

<!-- language: lang-html -->

<div class="wrapper">
<div></div>
<div data-player="1">p1</div>
<div data-player="2">p2</div>
<div></div>
<div data-player="3">p3</div>
<div></div>
<div></div>
<div data-player="4">p4</div>
<div></div>
<div data-player="5">p5</div>
<div data-player="6">p6</div>
<div></div>
</div>

<!-- end snippet -->

Your main issue is that a query param is of type String, but you're using case 1: instead of case "1":. Besides that I would not use switch case at all.

Instead of using IDs, use classes like

<div class="player">p1</div>
<div class="player">p2</div>
<div class="player">p3</div>
<div class="player">p4</div>
<div class="player">p5</div>
<div class="player">p6</div>

All the JavaScript you need is:

const urlParams = new URLSearchParams(window.location.search);
const elsPlayer = document.querySelectorAll(".player");
const totComputer = elsPlayer.length - urlParams.get("players");
[...elsPlayer].slice(-totComputer).forEach(el => {
  el.textContent = "Computer";
});

• Use querySelectorAll to get a NodeList of your .player DIVs
• Use new URLSearchParams(window.location.search) and the .get() method to retrieve the String of the number of human players from the URI query search param
• Use .slice(-N) to get the last N DIV elements
• Use .forEach() to iterate your (sliced, last N) elements and change their textContent