Creé un elemento que dibuja un rectángulo. ¿Cómo puedo crear otro elemento que agregue la entrada de un jugador? Cada vez que trato de agregar el siguiente código, dice este error:
TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'appendChild') en HTMLButtonElement. (jscript.js:16:57)
Gracias por adelantado.
//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>En esta línea:
document.getElementById("active_player").appendChild(playerName.value)
Está tratando de obtener una identificación de active_player , pero está creando un componente con una identificación de act_player en esta línea:
active_player.setAttribute("id", "act_player") .
Debería funcionar si ambas identificaciones coinciden.
Hubo pocos errores tipográficos y lógicos en su código.
Creo que esto es lo que estás buscando.
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>