Question

我正在制作an rgb guesser game for school，而我想要达到的拉伸目标是“在javascript中制作div”。出于某种原因，当我制作它们时，我的div不会出现。这是javascript代码片段

dothething()
function dothething(){
  divs = MakeDivs(4);
  var randomcolor = Math.floor(Math.random()*4);
  WinningDiv = divs[randomcolor];
}

function MakeDivs(X){
  for(i = 0;i<=X;i++){
    var div = (document.createElement("div"));
    div.style.borderRadius = "50%";
    div.height = "100px";
    div.width = "125px";
  }
  console.log(divs)

  var container = document.getElementById("container")
  container.appendChild(div);

  return divs
}

这里有一些填充html

<body>
  <div> FillerDiv</div>
</body>

Answer 1

您忘了将div附加到容器中。

var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
container.appendChild(div);

Answer 2

您必须在循环中嵌入container.appendChild(div);。在原始代码中，您刚刚添加了最后一个div。

function MakeDivs(X){
var container = document.getElementById("container");
var divs = [];
for(i = 0;i<=X;i++){
    var div = (document.createElement("div"));
    div.style.borderRadius = "50%";
    div.height = "100px";
    div.width = "125px";
    divs.push(div);
    container.appendChild(div);
}
console.log(divs);     
return divs;
}

Answer 3

您需要在循环中包含append并使用正确的控件来追加您的DIV。如果您想要返回DIVs元素，请将它们添加到数组并返回它们，如下面的代码所示：

function MakeDivs(X){
var divs = [];
for(i = 0;i<=X;i++){
    var div = (document.createElement("div"));
    div.style.borderRadius = "50%";
    div.height = "100px";
    div.width = "125px";
    document.body.appendChild(div);
    divs.push(div);
}
console.log(divs)
return divs
}

Answer 4

缺少divs的数组。

应用宽度和高度的方法不正确。

div.height = "100px";
    ^

div.width = "125px";
    ^

dothething()

function dothething() {
  divs = MakeDivs(4)
  var randomcolor = Math.floor(Math.random() * 4)
  WinningDiv = divs[randomcolor]
}

function MakeDivs(X) {
  var container = document.getElementById("container");
  var divs = [];
  for (i = 0; i <= X; i++) {
    var div = (document.createElement("div"));
    div.style.borderRadius = "50%";
    div.style.height = "100px";
    div.style.width = "125px";
    container.appendChild(div);
    
    divs.push(div);
  }
  //console.log(divs)

return divs
}

#container div {
  background-color: lightgreen;
}

<div>
FillerDiv
<div id='container'></div>
</div>

Answer 5

这对你有帮助。如果没有定义HTML tag ID，您将获得Id container。应该在任何地方使用之前定义变量。您错过了divs array来定义。您应该在循环中添加每个div。

＆＃13;

dothething()
function dothething(){
var divs = MakeDivs(4)
var randomcolor = Math.floor(Math.random()*4)
WinningDiv = divs[randomcolor]
}

function MakeDivs(X){
var container = document.getElementById("container");
var divs = [];
for(i = 0;i<=X;i++){
    var div = document.createElement("div");
    div.style.borderRadius = "50%";
    div.height = "100px";
    div.width = "125px";
    div.innerHTML = 'Test'+i;
    divs.push(div);
    container.appendChild(div);
}
console.log(divs);
return divs
}

＆＃13;

<body>
<div id="container"> FillerDiv</div>
</body>

＆＃13;

Answer 6

您可以使用documentFragment创建包含所有彩色div的块。我重构了一下你的代码。您可以在jsfiddle上查看解决方案 - https://jsfiddle.net/2zcg59sd/，也可以在此处运行代码段。

＆＃13;

dothething()

function dothething(){
var divs = MakeDivs(4) ;
document.getElementById("randomColors").appendChild(divs);
}


function MakeDivs(X){
  var docFragment = document.createDocumentFragment();

  for(i = 0;i<=X;i++){
      var randomcolor = Math.floor(Math.random()*900000) + 100000;
      var newDiv = document.createElement("div"); 

      newDiv.style.borderRadius = "50%";
      newDiv.style.height = "100px";
      newDiv.style.float = "left";
      newDiv.style.width = "125px";
      newDiv.style.backgroundColor = "#" + randomcolor;

      docFragment.appendChild(newDiv);
  }


  return docFragment
}

＆＃13;

<div> FillerDiv</div> 
<div id="randomColors"></div>

＆＃13;

在Javascript中创建的Div不会出现

6 个答案: