Uncaught TypeError: Cannot set property ‘innerHTML’ of null after i try to do it again

Question

When resetting the values through Reset() function, you have removed the inner elements like RandomNames and TotalMembers. As a workaround, you can add those two elements again when resetting.

var Names = [];
        var Team1 = [];
        var Team2 = [];

        function SetName(NameClicked) {
            if(!(Names.includes(NameClicked))) {
                Names.push(NameClicked);
            } else {
                var DeleteNamePos = Names.indexOf(NameClicked);
                Names.splice(DeleteNamePos, 1); 
            }
            document.getElementById("RandomNames").innerHTML = Names;
            document.getElementById("TotalMembers").innerHTML = Names.length;
        }

        function Randomize() {
            var i = 1;
            while(i <= Names.length)   {
                var RandomNameSelect = Math.floor(Math.random() * Names.length);
                Team1.push(Names[RandomNameSelect]);
                Names.splice(RandomNameSelect, 1);

                var RandomNameSelect2 = Math.floor(Math.random() * Names.length);
                Team2.push(Names[RandomNameSelect2]);
                Names.splice(RandomNameSelect2, 1);
            }
            document.getElementById("Spelers").innerHTML = "Teams are: ";
            document.getElementById("TotalPlayers").innerHTML = "";
            document.getElementById("TeamOne").innerHTML = Team1;
            document.getElementById("TeamTwo").innerHTML = Team2;
        }

        function Reset() {
            Names = [];
            Team1 = [];
            Team2 = [];
            document.getElementById("TotalPlayers").innerHTML = 'Total Players: <span id="TotalMembers">0</span>';
            document.getElementById("Spelers").innerHTML = 'Players: <span id="RandomNames"></span>';
            document.getElementById("TeamOne").innerHTML = Team1;
            document.getElementById("TeamTwo").innerHTML = Team2;
        }

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="Style.css">
    <title></title>
</head>

<body>
    <button onclick="SetName(this.id)" id=" Name1">Name1</button>
    <button onclick="SetName(this.id)" id=" Name2">Name2</button>
    <button onclick="SetName(this.id)" id=" Name3">Name3</button>
    <button onclick="SetName(this.id)" id=" Name4">Name4</button>
    <button onclick="SetName(this.id)" id=" Name5">Name5</button>
    <button onclick="SetName(this.id)" id=" Name6">Name6</button>
    <button onclick="SetName(this.id)" id=" Name7">Name7</button>
    <button onclick="SetName(this.id)" id=" Name8">Name8</button>
    <button onclick="Randomize()">Randomize</button>
    <button onclick="Reset()">Reset</button>
    <p id="Spelers">Players: <span id="RandomNames"></span></p>
    <p id="TotalPlayers">Total Players: <span id="TotalMembers">0</span></p>
    <p>Team 1: <span id="TeamOne"></span></p>
    <p>Team 2: <span id="TeamTwo"></span></p>

Leave a Comment Cancel Reply