CODEWITHSUNDEEP
javascriptcsshtmldom
shmnsw
shmnsw

Reputation: 649

Creating and styling elements dynamically

I want to dynamically create 6 boxes when the page is loaded. They should be inline-block, so eventually it will look like 3 lines, with 2 boxes on each line.

I tried the code below without any JavaScript (just used some static HTML and CSS), and it seemed to work fine.

Generally, the script looks fine to me -- however, it does nothing. What am I doing wrong? Is it something about the order of the CSS and the JavaScript?

style1.css:

* {
    margin:0;
    padding:0;
}

header,section,nav,aside,footer{
    display:block;
} 

.wrapper{
    position: relative;
    height: 2150px;
    width: 900px;
    background-color: #336b98;
    margin: 0 auto;
}

section#contentSection_layout3{
    position: absolute;
    top:193px;
    height: 1957px;
    width: 900px;
    border-right: solid 1px #FFF;
}

HTML & JavaScript:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="includes/style1.css">
        <script src="includes/JavaScript.js"></script>
        <title> EX </title>
        <script>
            window.onload = function(){
                var boxesNum = 6;
                for(var i = 0; i < boxesNum; i++){
                    var rect = new rect();
                    rect.setAttribute('display', 'inline-block');
                    rect.setAttribute('margin-left', '200');
                    rect.setAttribute('margin-top', '100');
                    rect.setAttribute('height', '150');
                    rect.setAttribute('width', '150');
                    rect.setAttribute('background-color', '#FFF');
                    document.getElementById('contentSection_layout3').appendChild(rect);
                }
            };
        </script>
    </head>

    <body>
        <div class="wrapper">
            <section id="contentSection_layout3"></section>
        </div>
    </body>
</html>

Upvotes: 2

Views: 81

Answers (1)

bjb568
bjb568

Reputation: 11488

var rect = new rect();

Unless you have defined rect elsewhere, you want:

var rect = document.createElement('div');

Also, setAttribute is not for styles, style is for styles.

rect.style.display = 'inline-block';
rect.style.marginLeft '200px';
rect.style.marginTop = '100px';
rect.style.height = '150px';
rect.style.width = '150px';
rect.style.backgroundColor = '#FFF';

Also, don't forget your pxs.

Upvotes: 3

Related Questions