CODEWITHSUNDEEP
javascripthtmlcss
SpaceSpaghetti
SpaceSpaghetti

Reputation: 71

Trying to generate 100 boxes but only 2 boxes are displayed?

So I'm only using javascript, html, and css to generate 100 boxes in any random position, this works by using the div with the id container in the html file and then using the javascript file to generate the boxes through a loop making a div for each box then appending it to the container, but the problem is I can see two boxes appearing on screen? here is my code below:

//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";


      }
  }

//here is the css
#box
{
  background-color: blue;
  width: 50px;
  height: 50px;
  padding: 5px;
  position: fixed;

}

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

Upvotes: 0

Views: 255

Answers (2)

user1587368
user1587368

Reputation: 316

Use the name attribute and a data-id attribute to retrieve any elements with an unique id.

Construction:

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

HTML result :

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

Add a function to retrieve any element with the first occurence of a numbered id.

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)

Upvotes: 0

shadow-lad
shadow-lad

Reputation: 538

Don't get a reference for the box again from the DOM

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


      }
   }

ID's should be unique, instead use a class for each box

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


      }
  }

So your code in the end becomes:

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


      }
  }
.box
{
  background-color: blue;
  width: 50px;
  height: 50px;
  padding: 5px;
  position: fixed;

}
<!DOCTYPE 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>

Upvotes: 1

Related Questions