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 divs”之前移动到“var divs”循环之后。

2）您正在改变DOM中所有现有的div： var divs = document.getElementsByTagName（“div”）; 不要这样做，请使用dfrag。

3）像Matthew说的那样，你必须将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();

生成随机数的div

3 个答案: