Question

我在编码训练营的第一周，我正在完成一个用js创建DOM元素的类项目。我创建了一个按钮，它会在按下时为我的html添加一个div，并且我还添加了其他几个事件，例如.onclick和.onmouseover。每个div的id设置为共享相同类名的div的.length。我试图删除nextsibling div，当点击div并且该div的id是偶数时，但我得到的返回值是＆＃39; null＆＃39;。我无法弄清楚我错过了什么......任何帮助都会受到赞赏！

这是我的完整代码：

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将是兄弟姐妹。< / p>

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;
}

试图返回.nextSibling div值

1 个答案: