Creating boxes in javascript

Question

Welcome To Ask or Share your Answers For Others

Creating boxes in javascript

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

Creating boxes in javascript

I am trying to create multiple boxes along the top of the page using javascript. I have one box but cannot figure out how to get multiple along the top of the page. This is what I have so far:

    <html>
  <head>
    <title>Boxes on Boxes on Boxes</title>
    <link rel="stylesheet" type="text/css" href="boxes.css">
    <script language="JavaScript">
        el=document.getElementById("box1");
        width=window.innerWidth-50;
        height=window.innerHeight-50;
        el.style.left=width*Math.random();
        el.style.top=height*Math.random();

        el=document.getElementById("box2");
        width=window.innerWidth-50;
        height=window.innerHeight-50;
        el.style.right=width*Math.random();
        el.style.top=height*Math.random();

        el=document.getElementById("box3");
        width=window.innerWidth-50;
        height=window.innerHeight-50;
        el.style.middle=width*Math.random();
        el.style.top=height*Math.random();

    </script>
  </head>
  <body>
    <div id="box1">
      First box 
    </div>

    <div id="box2">
        Second box
    </div>

    <div id="box3">
        Third box
    </div>
  </body>
</html>

Here is the CSS that I have:

#box1{
    background-color:orange;
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;
}
#box2{
    background-color:blue;
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;
}
#box3{
    background-color:green;
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;
}

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:13:45+0000

You need to either move the <script> element to the end or wrap your code in a DOM ready or onload handler, because otherwise getElementById() won't find any elements because they won't have been parsed yet.

Then you need to include a unit (e.g., "px") in the left and top style properties.

Also there's no need to recalculate the width and height for each box since you're doing the same calculation for each. (And you should declare your variables with var, but although good practice that isn't essential to make it work.)

Here's a working version:

    var el=document.getElementById("box1");
    var width=window.innerWidth-50;
    var height=window.innerHeight-50;
    el.style.left=width*Math.random() + "px";
    el.style.top=height*Math.random() + "px";

    el=document.getElementById("box2");
    el.style.right=width*Math.random() + "px";
    el.style.top=height*Math.random() + "px";

    el=document.getElementById("box3");
    el.style.middle=width*Math.random() + "px";
    el.style.top=height*Math.random() + "px";

Demo: http://jsfiddle.net/m3Gg3/

Also the left and top properties in your CSS should use : not =.

Categories

Creating boxes in javascript

Creating boxes in javascript

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags