尝试返回.nextSibling div值

Question

我在编码训练营的第一周，我正在做一个类项目，在这个项目中我们用js创建DOM元素。我已经创建了一个按钮，当它被按下时，它会将div添加到我的html中，我还添加了其他几个事件，如.onclick和.onmouseover。每个div的id被设置为共享相同类名的div的.length。我正在尝试删除下一个同级div，当一个div被点击时，该div的id是一个偶数，但我得到了一个'null‘的返回值。我不知道我在做什么missing...any help会很感激！

下面是我的完整代码：

document.addEventListener('DOMContentLoaded', function() {

var button = document.createElement('button');
button.innerHTML = "button";
button.id = "boxButton";
document.body.appendChild(button);

document.getElementById("boxButton").onclick = function() {buttonClick()};

var colors = ['red', 'yellow', 'blue', 'green', 'orange']

function buttonClick() {
  var mainDiv = document.createElement('div');
  var box = document.createElement('div');
  box.className = "black-box";
  document.body.appendChild(mainDiv);
  mainDiv.appendChild(box);
  var divCounter = document.getElementsByClassName('black-box');
  var divNumber = divCounter.length.toString();
  box.id = divNumber;

  box.onmouseover = function() {
    document.getElementById(divNumber).innerHTML = divNumber;
    box.className = 'hover-box';
  }
  box.onmouseleave = function() {
    box.className = "black-box";
  }
  box.onclick = function() {
    var randomColor = colors[Math.floor(Math.random()*colors.length)];
    document.getElementById(divNumber).style.backgroundColor =      randomColor;
  }

  box.ondblclick = function() {
    if (divNumber % 2 === 0) {
        var nextDiv = document.getElementById(divNumber).nextSibling;
        console.log(nextDiv) <-- getting a 'null' value to  console -->
    }
}

} })；

Answer 1

我已经清理了一些代码，并试图向你展示，你应该只添加一次maindiv，而不是每次点击按钮时，那么你的black-box就会成为兄弟。

​

document.addEventListener('DOMContentLoaded', function() {
  // Returns a random integer between min (included) and max (excluded)
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  }
  var colors = ['red', 'yellow', 'blue', 'green', 'orange'];
  var mainDiv = document.createElement('div');
  mainDiv.id = 'mainDiv';
  var button = document.createElement('button');
  button.textContent = 'button';
  button.id = 'boxButton';
  button.addEventListener('click', function() {
    var box = document.createElement('div');
    box.id = document.getElementsByClassName('black-box').length + 1;
    box.className = 'black-box';
    box.addEventListener('mouseover', function(evt) {
      evt.target.textContent = evt.target.id;
      box.className = 'hover-box';
    }, false);
    box.addEventListener('mouseleave', function() {
      box.className = 'black-box';
    }, false);
    box.addEventListener('click', function(evt) {
      var randomColor = colors[getRandomInt(0, colors.length)];
      evt.target.style.backgroundColor = randomColor;
    }, false);
    box.addEventListener('dblclick', function(evt) {
      if (evt.target.id % 2 === 0) {
        var nextDiv = evt.target.nextSibling;
        console.log(nextDiv);
      }
    }, false);
    mainDiv.appendChild(box);
  }, false);
  document.body.appendChild(button);
  // only want to add this once, not on every click
  document.body.appendChild(mainDiv);
}, false);

#mainDiv {
  border: 1px solid black;
}
.black-box {
  height: 1em;
  width: 100%;
  border: 1px solid black;
}

​