生成隨機數div div

Question

我無法讓腳本創建隨機數量的div。在這個5到20之間的特定示例中。問題出現在for循環中？生成隨機數的函數在隨機顏色函數中正常工作，我猜這是由於某些原因而無法識別的。此外，我沒有在螢火蟲中發現任何錯誤。

例：

function generateDiv(){ 
    var dfrag = document.createDocumentFragment(); 
    var count = generateRandom(5, 20); 
    var i=0; 
    for (var i = 0; i < count; i++){ 
     var div = document.createElement("div"); 
     dfrag.appendChild(div); 
    } 
} 
var divs = document.getElementsByTagName("div"); 
for (i = 0; i < divs.length; i++) { 
    div = divs[i]; 
    alterDivStyle(div); 
} 
function rndColor() { 
    var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red 
      g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green 
      b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue 
    return '#' + r + g + b; 
} 

function generateRandom(min, max) { 
    var number = Math.floor(Math.random() * (max - min)) + min; 
    return number; 
} 
function alterDivStyle(div){ 
    div.style.width = generateRandom(20, 100) +"px"; 
    div.style.height = generateRandom(20, 100) +"px"; 
     div.style.backgroundColor = rndColor(); 
    div.style.color = rndColor(); 
    div.style.position = "absolute"; 
    div.style.border = "solid"; 
    div.style.borderColor = rndColor(); 
    div.style.borderWidth = rndColor(); 
    div.style.borderRadius = generateRandom(0, 10)+"px"; 
    div.innerHTML = "<strong>div</strong>"; 
}; 

Answer 1

你永遠不添加的文檔片段的DOM

「DocumentFragments是DOM節點他們從來不是主要的DOM樹的一部分，通常的用例是創建。文檔片段，將元素附加到文檔片段中，然後將文檔片段附加到DOM樹中。在DOM樹中，文檔片段被其所有子項取代。

https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment

Answer 2

1）你在錯誤的地方封閉的「generateDiv功能」，從之前移動右括號的「VAR的div」到「VAR div的」循環之後。

2）您正在更改DOM中所有現有的div： var divs = document.getElementsByTagName（「div」）; 不要那樣做，使用dfrag。

3）像馬修說的，你必須添加dfrag到DOM。

Answer 3

function generateDiv(){ 
    var dfrag = document.createDocumentFragment(); 
    var count = generateRandom(5, 20); 
    var i=0; 
    for (var i = 0; i < count; i++){ 
    var div = document.createElement("div"); 
    dfrag.appendChild(div); 
    } 
    for (i = 0; i < dfrag.childNodes.length; i++) { 
    div = dfrag.childNodes[i]; 
    alterDivStyle(div); 
    } 
    document.body.appendChild(dfrag); 
} 
function rndColor() { 
    var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red 
    g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green 
    b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue 
    return '#' + r + g + b; 
} 

function generateRandom(min, max) { 
    var number = Math.floor(Math.random() * (max - min)) + min; 
    return number; 
} 
function alterDivStyle(div){ 
    div.style.width = generateRandom(20, 100) +"px"; 
    div.style.height = generateRandom(20, 100) +"px"; 
    div.style.backgroundColor = rndColor(); 
    div.style.color = rndColor(); 
    div.style.position = "absolute"; 
    div.style.border = "solid"; 
    div.style.borderColor = rndColor(); 
    div.style.borderWidth = rndColor(); 
    div.style.borderRadius = generateRandom(0, 10)+"px"; 
    div.innerHTML = "<strong>div</strong>"; 
}; 
generateDiv();