I created element that draws rectangle. How can I create another element that would append a player input into it? Whenever I try to append with the code bellow, it says this error:
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at HTMLButtonElement. (jscript.js:16:57)
Thanks in advance.
//Clicking a button will add another player into the counter.
let playerButton = document.getElementById("addPlayer")
let playerInput = document.getElementById("playerName");
let playerId = 0;
playerButton.addEventListener("click", function() {
if (!playerInput.value) {
alert("You have to write a name")
} else {
const active_player = document.createElement("div" + playerId)
active_player.setAttribute("id", "act_player")
const playerName = document.createElement("p")
document.getElementById("players").appendChild(active_player)
document.getElementById("active_player").appendChild(playerName.value)
playerId++
console.log(playerName)
}
}).group:after {
content: "";
display: table;
clear: both;
}
body {
width: 80em;
margin: 0 auto;
}
.playerPick {
text-align: center;
}
#act_player {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
height: 40em;
width: 25em;
border: solid black 1px;
}<div class="playerPick">
<h1>UNO SCORE COUNTER</h1>
<button id="addPlayer">Add Player</button>
<input type="text" placeholder="Enter your name here" id="playerName">
</div>
<div id="players"></div>In this line:
document.getElementById("active_player").appendChild(playerName.value)
You are trying to get an id of active_player, but you are creating a component with and id of act_player on this line:
active_player.setAttribute("id", "act_player").
It should work if both ids match.
There were few typos and logical errors in your code.
I think, this is what you're looking for.
let playerButton = document.getElementById("addPlayer")
let playerInput = document.getElementById("playerName");
let playerId = 0;
playerButton.addEventListener("click", function() {
if (!playerInput.value) {
alert("You have to write a name")
} else {
var active_player = document.getElementById("act_player");
if (active_player === null) {
active_player = document.createElement("div");
active_player.setAttribute("id", "act_player");
}
const playerName = document.createElement("p");
playerName.innerText = playerInput.value;
document.getElementById("players").appendChild(active_player);
document.getElementById("act_player").appendChild(playerName);
playerId++;
}
});.group:after {
content: "";
display: table;
clear: both;
}
body {
width: 80em;
margin: 0 auto;
}
.playerPick {
text-align: center;
}
#act_player {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
height: 40em;
width: 25em;
border: solid black 1px;
}<div class="playerPick">
<h1>UNO SCORE COUNTER</h1>
<button id="addPlayer">Add Player</button>
<input type="text" placeholder="Enter your name here" id="playerName">
</div>
<div id="players"></div>