javascript - 无法在 javascript 中用前一个元素兄弟递增最后一个元素

Question

我正在努力完成一项小任务。当用户单击其中一个框时，它应该将该框递增 2，并将其旁边的框递增 1。如果一个框的左侧有另一个框，它应该将该框递增 1 以及一个在右边。然而，虽然代码适用于页面上的所有框，但当单击最后一个框时，它之前的框不会增加。下面是代码。

function boxInc(element){

var number = parseInt(element.innerHTML);
number+=2;
element.innerHTML = number;


rightNumber = parseInt(element.nextElementSibling.innerHTML);
rightNumber++;
element.nextElementSibling.innerHTML = rightNumber;

leftNumber = parseInt(element.previousElementSibling.innerHTML);
leftNumber++;
element.previousElementSibling.innerHTML = leftNumber;

}

#container div {
  width: 5vw;
  height: 5vw;
  background: rgb(10,200,40);
  float: left;
  margin: 1vw;
  padding: 1vw;
  font-family: sans-serif;
  font-size: 20pt;
}

<div id="container">
<div id="1" onclick="boxInc(this)">0</div>
<div id="2" onClick="boxInc(this)">0</div>
<div id="3" onClick="boxInc(this)" >0</div>
<div id="4" onClick="boxInc(this)">0</div>
<div id="5" onClick="boxInc(this)">0</div>
<div id="6" onClick="boxInc(this)">0</div>
</div>

我想要一个普通的 JavaScript 解决方案，而不是一个 jQuery 解决方案。

Answer 1

正如 Randy Casburn 在评论中所说，您的做法是正确的，您只需要在尝试获取或设置内容之前检查 sibling 是否存在。

此外，我认为你可以使用 textContent 而不是 innerHTML，因为你只是设置文本，而不是使用 HTML，所以不需要调用 HTML"编译器”。 下面的代码应该可以帮到你，看看:

function boxInc(element){
  var number = parseInt(element.textContent);
  number += 2;
  element.textContent = number;

  if (element.nextElementSibling != null){
    rightNumber = parseInt(element.nextElementSibling.textContent);
    rightNumber++;
    element.nextElementSibling.textContent = rightNumber;
  }

  if (element.previousElementSibling != null){
    leftNumber = parseInt(element.previousElementSibling.textContent);
    leftNumber++;
    element.previousElementSibling.textContent = leftNumber;
  }

}

#container div {
  width: 5vw;
  height: 5vw;
  background: rgb(10,200,40);
  float: left;
  margin: 1vw;
  padding: 1vw;
  font-family: sans-serif;
  font-size: 20pt;
}

<div id="container">
  <div id="1" onclick="boxInc(this)">0</div>
  <div id="2" onClick="boxInc(this)">0</div>
  <div id="3" onClick="boxInc(this)">0</div>
  <div id="4" onClick="boxInc(this)">0</div>
  <div id="5" onClick="boxInc(this)">0</div>
  <div id="6" onClick="boxInc(this)">0</div>
</div>