Trying to return .nextSibling div value

I'm on my first week in a coding bootcamp, and I'm working through a class project where we create DOM elements with js. I have created a button that will add a div to my html when it is pressed, and I've also added several other events such as .onclick and .onmouseover. Each div's id is set to the .length of the div's that share the same class name. I am trying to have the nextsibling div removed, when a div is clicked on and the id of that div is an even number, but I'm getting a returned value of 'null'. I can't figure out what I'm missing...any help would be appreciated!

Here is my full code:

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

var button = document.createElement('button');
button.ierHTML = "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).ierHTML = 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(nextDivSibling) <-- getting a 'null' value to  console -->
    }
}

} });