JavaScript box creation explained

Question

JavaScript box creation explained

I've been experimenting with JavaScript to create multiple boxes at the top of my page. While I've successfully created one box, I'm struggling to extend this to have several boxes across the top. This is where I'm currently stuck:

    <html>
  <head>
    <title>Multiple Boxes Display</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>

To style these boxes, here is the CSS 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;
}

javascript

Answer 1

Answer №1

To ensure that the <script> element functions correctly, consider moving it to the end of your code or wrapping it in a DOM ready or onload handler. This will allow getElementById() to locate elements after they have been parsed.

Don't forget to include a unit (such as "px") in the left and top style properties.

Avoid recalculating the width and height for each box, as the same calculations are being repeated unnecessarily. It's also recommended to declare variables using var, although this is not essential for functionality.

Check out this revised version below:

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

See the demo here: http://jsfiddle.net/m3Gg3/

Additionally, ensure that the left and top properties in your CSS use : instead of =.

Answer 2

To ensure that the <script> element functions correctly, consider moving it to the end of your code or wrapping it in a DOM ready or onload handler. This will allow getElementById() to locate elements after they have been parsed.

Don't forget to include a unit (such as "px") in the left and top style properties.

Avoid recalculating the width and height for each box, as the same calculations are being repeated unnecessarily. It's also recommended to declare variables using var, although this is not essential for functionality.

Check out this revised version below:

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

See the demo here: http://jsfiddle.net/m3Gg3/

Additionally, ensure that the left and top properties in your CSS use : instead of =.

Answer 3

Answer №2

Understanding your requirements may pose a challenge, could this solution be what you are looking for?

<script>
window.onload = function() {
    var categories = ["Category A", "Category B", "Category C"]
    var width=window.innerWidth-50
    var height=window.innerHeight-50-120
    for (var i = 0; i < categories.length; i++) {
        var element = document.createElement('div')
        console.log(element)
        element.innerHTML = categories[i]
        element.style.position = "absolute"
        element.style.border = "1px solid rgb(0,0,0)"
        element.style.left= (width / categories.length) * i
        element.style.top=0
        element.style.width = width / categories.length
        element.style.height = "120px"
        document.body.appendChild(element);
    }
    for (var i = 0; i < categories.length; i++) {
        var element = document.createElement('div')
        console.log(element)
        element.innerHTML = categories[i]
        element.style.position = "absolute"
        element.style.border = "1px solid rgb(0,0,0)"
        element.style.left=0
        element.style.top=(height / categories.length) * i + 120
        element.style.width = "120px"
        element.style.height = height / categories.length
        document.body.appendChild(element);
    }
}
</script>

Answer 4

Understanding your requirements may pose a challenge, could this solution be what you are looking for?

<script>
window.onload = function() {
    var categories = ["Category A", "Category B", "Category C"]
    var width=window.innerWidth-50
    var height=window.innerHeight-50-120
    for (var i = 0; i < categories.length; i++) {
        var element = document.createElement('div')
        console.log(element)
        element.innerHTML = categories[i]
        element.style.position = "absolute"
        element.style.border = "1px solid rgb(0,0,0)"
        element.style.left= (width / categories.length) * i
        element.style.top=0
        element.style.width = width / categories.length
        element.style.height = "120px"
        document.body.appendChild(element);
    }
    for (var i = 0; i < categories.length; i++) {
        var element = document.createElement('div')
        console.log(element)
        element.innerHTML = categories[i]
        element.style.position = "absolute"
        element.style.border = "1px solid rgb(0,0,0)"
        element.style.left=0
        element.style.top=(height / categories.length) * i + 120
        element.style.width = "120px"
        element.style.height = height / categories.length
        document.body.appendChild(element);
    }
}
</script>

Answer 5

Answer №3

    <html>
  <head>
    <title>Colorful Boxes</title>
    <style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
    position:absolute;
    left:100px;
    top:100px;      
}
#box1, #box2, #box3, #box10, #box11, #box12 {
    padding:5px;
    width:50px;
    height:50px;
    cursor:pointer;
    float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
    padding:5px;
    width:50px;
    height:50px;
    cursor:pointer;
}   
#box1, #box4, #box7, #box10{
    background-color:orange;
}
#box2, #box5, #box8, #box11 {
    background-color:blue;
}
#box3, #box6, #box9, #box12{
    background-color:green;
}
#box4, #box7 {
    font-family: Arial;
}
#box5, #box8 {
    font-family: Courier;
}
#box6, #box9 {
    font-family: Tahoma;
}   
#textbook {
    padding: 5px;
    background-color:red;
}
    </style>
    <script language="JavaScript">
        width=window.innerWidth;
        height=window.innerHeight;
    function boxes() {  
        document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
        document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
        document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
        document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
        document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
        document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;  
        document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
        document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
    }

    function colorChange(field,group) {
        switch (group) {
            case 1:
                document.getElementById("box2").style.backgroundColor = field.innerText;
                break;
            case 4:
                document.getElementById("box11").style.backgroundColor = field.innerText;
                break;
        }       
    }
    function fontChange(field,group) {
        switch (group) {
            case 2:
                document.getElementById("box5").style.fontFamily = field.innerText;
                break;
            case 3:
                document.getElementById("box8").style.fontFamily = field.innerText;
                break;
        }       
    }       
    </script>
  </head>
  <body onload="boxes()">
    <div id="box_group1">
        <div id="box1" onclick="colorChange(this,1)">
            Orange 
        </div>

        <div id="box2" onclick="colorChange(this,1)">
            Blue
        </div>

        <div id="box3" onclick="colorChange(this,1)">
            Green
        </div>
    </div>
    <div id="box_group2">
        <div id="box4" onclick="fontChange(this,2)">
            Arial 
        </div>

        <div id="box5" onclick="fontChange(this,2)">
            Courier
        </div>

        <div id="box6" onclick="fontChange(this,2)">
            Tahoma
        </div>
    </div>
    <div id="box_group3">
        <div id="box7" onclick="fontChange(this,3)">
            Arial
        </div>

        <div id="box8" onclick="fontChange(this,3)">
            Courier
        </div>

        <div id="box9" onclick="fontChange(this,3)">
            Tahoma
        </div>
    </div>
    <div id="box_group4">
        <div id="box10" onclick="colorChange(this,4)">
            Orange 
        </div>

        <div id="box11" onclick="colorChange(this,4)">
            Blue
        </div>

        <div id="box12" onclick="colorChange(this,4)">
            Green
        </div>
    </div>
    <div id="textbook">Textbook</div>
  </body>
</html>

Answer 6

    <html>
  <head>
    <title>Colorful Boxes</title>
    <style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
    position:absolute;
    left:100px;
    top:100px;      
}
#box1, #box2, #box3, #box10, #box11, #box12 {
    padding:5px;
    width:50px;
    height:50px;
    cursor:pointer;
    float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
    padding:5px;
    width:50px;
    height:50px;
    cursor:pointer;
}   
#box1, #box4, #box7, #box10{
    background-color:orange;
}
#box2, #box5, #box8, #box11 {
    background-color:blue;
}
#box3, #box6, #box9, #box12{
    background-color:green;
}
#box4, #box7 {
    font-family: Arial;
}
#box5, #box8 {
    font-family: Courier;
}
#box6, #box9 {
    font-family: Tahoma;
}   
#textbook {
    padding: 5px;
    background-color:red;
}
    </style>
    <script language="JavaScript">
        width=window.innerWidth;
        height=window.innerHeight;
    function boxes() {  
        document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
        document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
        document.getElementById("box_group3").style.left=width-100-document.getElementById("box_group3").offsetWidth;
        document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
        document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
        document.getElementById("box_group4").style.top=height-100-document.getElementById("box_group4").offsetHeight;  
        document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
        document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
    }

    function colorChange(field,group) {
        switch (group) {
            case 1:
                document.getElementById("box2").style.backgroundColor = field.innerText;
                break;
            case 4:
                document.getElementById("box11").style.backgroundColor = field.innerText;
                break;
        }       
    }
    function fontChange(field,group) {
        switch (group) {
            case 2:
                document.getElementById("box5").style.fontFamily = field.innerText;
                break;
            case 3:
                document.getElementById("box8").style.fontFamily = field.innerText;
                break;
        }       
    }       
    </script>
  </head>
  <body onload="boxes()">
    <div id="box_group1">
        <div id="box1" onclick="colorChange(this,1)">
            Orange 
        </div>

        <div id="box2" onclick="colorChange(this,1)">
            Blue
        </div>

        <div id="box3" onclick="colorChange(this,1)">
            Green
        </div>
    </div>
    <div id="box_group2">
        <div id="box4" onclick="fontChange(this,2)">
            Arial 
        </div>

        <div id="box5" onclick="fontChange(this,2)">
            Courier
        </div>

        <div id="box6" onclick="fontChange(this,2)">
            Tahoma
        </div>
    </div>
    <div id="box_group3">
        <div id="box7" onclick="fontChange(this,3)">
            Arial
        </div>

        <div id="box8" onclick="fontChange(this,3)">
            Courier
        </div>

        <div id="box9" onclick="fontChange(this,3)">
            Tahoma
        </div>
    </div>
    <div id="box_group4">
        <div id="box10" onclick="colorChange(this,4)">
            Orange 
        </div>

        <div id="box11" onclick="colorChange(this,4)">
            Blue
        </div>

        <div id="box12" onclick="colorChange(this,4)">
            Green
        </div>
    </div>
    <div id="textbook">Textbook</div>
  </body>
</html>

Answer 7

Answer №4

Give this jQuery solution a try:

Instead of hardcoding IDs, dynamically create boxes in a more efficient way using your code. It's simple when you're making 4 boxes, but what about scaling up to 100 or more? It's best to always prioritize scalability in our work.

HTML :

<div id="mainDiv">

</div>

CSS :

// styling for all divs inside mainDiv 
#mainDiv div{
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;  
    float : left;
}

jQuery :

$(document).ready(function(){
    // define color array
    var colorArray = new Array("red", "green", "gray", "blue");
    // loop through desired number of boxes to create
    for(var i = 1; i <= colorArray.length; i++){
        $("#mainDiv").append("<div id=Box" + i + "></div>");
        //set background-color property based on color array
        $("#Box"+ i).css("background-color", colorArray[i-1]);
    }
});

See Demo

Check out a discussion thread on a similar case, and its proposed solution.

Answer 8

Give this jQuery solution a try:

Instead of hardcoding IDs, dynamically create boxes in a more efficient way using your code. It's simple when you're making 4 boxes, but what about scaling up to 100 or more? It's best to always prioritize scalability in our work.

HTML :

<div id="mainDiv">

</div>

CSS :

// styling for all divs inside mainDiv 
#mainDiv div{
    padding:5px;
    width:50px;
    height:50px;
    position:absolute;
    left=100px;
    top=100px;  
    float : left;
}

jQuery :

$(document).ready(function(){
    // define color array
    var colorArray = new Array("red", "green", "gray", "blue");
    // loop through desired number of boxes to create
    for(var i = 1; i <= colorArray.length; i++){
        $("#mainDiv").append("<div id=Box" + i + "></div>");
        //set background-color property based on color array
        $("#Box"+ i).css("background-color", colorArray[i-1]);
    }
});

See Demo

Check out a discussion thread on a similar case, and its proposed solution.

JavaScript box creation explained

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble with dynamic path generation for router-link in Vuejs when using a v-for loop?

apostrophe cutting off a portion of the input field's value

What is the best way to enable momentum-based scrolling for the root <html> element in iOS Safari?

Guide to deleting a user from a list in AngularJS

Preventing line breaks (endline) from PHP variable when passing to JavaScript

JavaScript fails to execute in Prestashop

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

The importance of formatting values in JavaScript

Avoid changing the format when sending a JSON string to Node

I'm having issues with my onchange event not triggering. Can't figure out the cause

Revisiting Async Await: A guide to implementing callbacks

Creating a brand new array based on the conditions of an if statement

Having difficulty with an API request and retrieving information from it to showcase on the web browser

Add the response from the API to a table

Focus on the original control that triggered a jQuery AJAX POST during a postback event

AngularJS is capable of dynamically altering the URL based on the specific HTTP method being used, such as

How can I access an object from a JavaScript file within a Laravel blade template?

Issue with cordova plugin network interface connectivity

Best practices for customizing v-calender in vue.js

What is the best way to extract data from multiple instances of <span> tags and store them in an array?