Question

所以我创建了一个骰子模拟器，其中包含重置表格的选项。我通过appendChild创建了带有骰子编号的新div，并希望用remove（）删除它。

即使它似乎正常工作，我仍然会遇到错误。代码和错误如下：

＆＃13;

function addMoreDice() {
  for (var i = 0; i < numInput.value; i++) {
    var div = document.createElement('div');
    div.className = "diceStyle";
    div.id = "dice" + String(i);
    div.innerHTML = Math.floor((Math.random() * 6) + 1);

    document.getElementById('diceTable').appendChild(div);
    howManyDice++;
  }
  currentValue = numInput.value;

}

function removeDice() {
  var removeDiv = document.getElementsByClassName("diceStyle");
  for (var i = 0; i < numInput.value; i++) {
    removeDiv[numInput.value - i - 1].remove();
  }
}

＆＃13;

<div id="diceTable"></div>

＆＃13;

未捕获的TypeError：无法读取属性＆＃39;删除＆＃39;未定义的在removeDice

使用html进行更新，尽管其中没有任何内容：

    <p>Pick how many dice you want to roll:</p>
<input id="diceNumber" type="number" name="diceNumber" onchange="return addMoreDice()">


<div id="diceTable">

</div>

编辑了removeDice函数，遗憾地改变了什么，工作，但是给出了错误

function removeDice(){
var removeDiv = document.getElementsByClassName("diceStyle");
var value = numInput.value;
if(value >0){
    for(var i=value; i > 0; i--){
        removeDiv[i-1].remove();
    }
}
}

Answer 1

问题似乎出现在removeDice（）函数中。从数组中删除项目会减少数组中的项目数（显然），但是for循环假设数组仍然具有与for循环开始时相同的项目数。因此，如果for循环以5个项目开始，然后删除一个，则数组中只有4个项目。由于for循环假定有5个项目，它将尝试删除数组中的第5个项目，但由于该数组只有4个项目，因此没有第5个项目要删除，从而导致错误。要解决此问题，请向后循环： for(var i = numInput.value; i > 0; i--)

删除div会产生错误

1 个答案: