Question

使用 Javascript 创建的 Div 不显示

2018-02-15

72

javascript html

我正在为学校制作 rgb 猜谜游戏，而我试图达到的延伸目标是“用 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

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

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

您忘记将 div 附加到容器。

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