开发者问题收集

未捕获的类型错误：我再次尝试后无法将属性“innerHTML”设置为 null

2020-11-05
68
javascript html

我已阅读了针对我的问题给出的多个答案，但均未做出任何更改。 我的问题是，当我按下“重置”按钮时，它会重置，但不会向我显示所有应显示的信息。出于某种原因，它找不到我想要更改的行的 ID。

简而言之：按下“重置按钮”后，它会出错。 

<!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>

   <script>
        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: ";
            document.getElementById("Spelers").innerHTML = "Players: ";
            document.getElementById("TeamOne").innerHTML = Team1;
            document.getElementById("TeamTwo").innerHTML = Team2;
        }
    </script>
</body>

此外，还有一个代码片段的链接： http://jsfiddle.net/u2wt9qpe/

3个回答

在 Reset() 函数中，您已使用 innerHTML 将 html 数据设置为 TotalPlayers 和 Spelers 选择器。 因此，内部 span 标签、 TotalMembers 和 RandomNames 选择器已被删除。

要重置数据，需要将 TotalMembers 和 RandomNames 选择器清空，如下所示。 

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("TotalMembers").innerHTML = "";
  document.getElementById("TeamOne").innerHTML = Team1;
  document.getElementById("TeamTwo").innerHTML = Team2;
}

function Reset() {
  Names = [];
  Team1 = [];
  Team2 = [];
  document.getElementById("TotalMembers").innerHTML = "";
  document.getElementById("RandomNames").innerText = "";
  document.getElementById("TeamOne").innerText = Team1;
  document.getElementById("TeamTwo").innerText = Team2;
}
<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>
Derek Wang
2020-11-05

通过 Reset() 函数重置值时，您已删除内部元素，如 RandomNames 和 TotalMembers 。作为解决方法，您可以在重置时再次添加这两个元素。 

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>
Harshana
2020-11-05

最初设置 DOM 时，您有 Players:

。请注意，ID=RandomNames 的元素是 ID="Spelers" 元素的子元素。执行 reset() 或 randomize() 时，此行 document.getElementById("Spelers").innerHTML = "Teams are: "; <--- 将删除 ID="RandomNames" 的子元素，因为它会替换所有内容。下次调用 SetName() 时，DOM 上将不再提供此元素。您可以在重置后添加代码来替换此元素。
Candace Ahrends
2020-11-05