Javascript 是否尝试生成100个框，但仅显示2个框？_Javascript_Html_Css

Javascript 是否尝试生成100个框，但仅显示2个框？

javascript html css

Javascript 是否尝试生成100个框，但仅显示2个框？,javascript,html,css,Javascript,Html,Css,因此，我只使用javascript、html和css在任意位置生成100个框，其工作原理是在html文件中使用id容器的div，然后使用javascript文件通过循环生成框，为每个框生成一个div，然后将其附加到容器中，但问题是我可以看到屏幕上出现两个框？下面是我的代码： //this is the javascript function myFunction(){ var container = document.getElementById("container&q

因此，我只使用javascript、html和css在任意位置生成100个框，其工作原理是在html文件中使用id容器的div，然后使用javascript文件通过循环生成框，为每个框生成一个div，然后将其附加到容器中，但问题是我可以看到屏幕上出现两个框？下面是我的代码：

//this is the javascript
function myFunction(){

      var container = document.getElementById("container");//o

    for (var i = 0; i < 100; ++i) {//o
          var box = document.createElement("div");//o
           box.setAttribute("id", "box");
           
          container.appendChild(box);//o
          var bx = document.getElementById("box");

          var w=window.innerWidth;
          var h=window.innerHeight;

          bx.style.right = w * Math.random() + "px";
          bx.style.top = h * Math.random() + "px";


      }
  }

//这是html

不再从DOM中获取框的引用

使用name属性和数据id属性检索具有唯一id的任何元素

结构：

let container = document.getElementById("container")
for(let count = 1; count < 100; ++count) {
    let box = document.createElement("DIV")
    box.setAttribute("name", "e")
    box.dataset.id = count

    container.appendChild(box)
}

id

s应该是唯一的它之所以被称为

getElementById

而不是

getElementsById

//this is the html
<!DOCUTYPE html>
<html lang = "en">

<head>
  
<link href = "box.css" rel = "stylesheet" type="text/css">
  <script src = "box.js" type="text/javascript"></script>
</head>
<body onload="myFunction()">
<div id="container">
</div>
</body>


</html>

    function myFunction(){

      var container = document.getElementById("container");//o

      for (var i = 0; i < 100; ++i) {//o
          var box = document.createElement("div");//o
          box.setAttribute("id", "box");
           
          container.appendChild(box);//o
          // var bx = document.getElementById("box"); <--- this line is redundant

          var w=window.innerWidth;
          var h=window.innerHeight;

          box.style.right = w * Math.random() + "px";
          box.style.top = h * Math.random() + "px";


      }
   }

function myFunction(){

      var container = document.getElementById("container");//o

      for (var i = 0; i < 100; ++i) {//o
          var box = document.createElement("div");//o
          box.classList.add("box");
           
          container.appendChild(box);//o

          var w=window.innerWidth;
          var h=window.innerHeight;

          box.style.right = w * Math.random() + "px";
          box.style.top = h * Math.random() + "px";


      }
  }

let container = document.getElementById("container")
for(let count = 1; count < 100; ++count) {
    let box = document.createElement("DIV")
    box.setAttribute("name", "e")
    box.dataset.id = count

    container.appendChild(box)
}

<div name="e" data-id="1"></div>
<div name="e" data-id="2"></div>
<div name="e" data-id="3"></div>
<div name="e" data-id="4"></div>

function getFormRef(name, id) {
    let d = document.getElementsByName(name)
    let x = Array.prototype.slice.call(d).filter(a => a.dataset.id == id)
    return x[0]
}

let first = getFormRef("e", 1)