.nextSibling div値を返そうとしています

Question

私はコーディングブートキャンプの最初の週にいます。私はjsでDOM要素を作成するクラスプロジェクトに取り組んでいます。私はそれが押されたときに私のHTMLにdivを追加するボタンを作成しました。また、.onclickと.onmouseoverのようないくつかの他のイベントも追加しました。各divのidは、同じクラス名を共有するdivの.lengthに設定されます。 divをクリックしてそのdivのIDが偶数の場合、nextsibling divを削除しようとしていますが、返された値は 'null'です。私は何が失われているか把握することはできません...どんな助けもありがとう！ここで

は私の完全なコードです：

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は兄弟になります。あなた `黒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; 
 
}