Search code examples
javascripthtmlappendchild

Create Div via Javascript - Syntax Issues

EDIT: Directly below is the new code. Below that is the original question. I am asking for help for what is wrong with this code, as, in my week-old eyes, it seems fine.

function creatediv(){

    for (i=1;i<13;i++){
        var newcovdiv = document.createElement('div');
        newcovdiv.setAttribute('id',"cover_"+i);
        newcovdiv.style.width="900px";
        newcovdiv.style.height="25px";
        newcovdiv.style.position="relative";
        newcovdiv.style.left="0px";
        newcovdiv.style.top=(i-1)*25+"px";
        newcovdiv.style.background="#FFFFFF";
        newcovdiv.style.display="none";
        document.getElementById('staff').appendChild(newcovdiv);
    }

    var newstaffdiv = document.createElement('div');
    newstaffdiv.setAttribute('id',"staff_sub");
    newstaffdiv.style.width="900px";
    newstaffdiv.style.height="300px";
    newstaffdiv.style.position="relative";
    newstaffdiv.style.left="0px";
    newstaffdiv.style.top="0px";
    newstaffdiv.style.backgroundImage="url(../images/staff_sub.png)";
    newstaffdiv.style.display="none";
    document.getElementbyId('staff').appendChild(newstaffdiv);

    for (i=13;i<101;i++){
        var newcovrdiv = document.createElement('div');
        newcovrdiv.setAttribute('id',"cover_"+i);
        newcovrdiv.style.width="900px";
        newcovrdiv.style.height="25px";
        newcovrdiv.style.position="relative";
        newcovrdiv.style.left="0px";
        newcovrdiv.style.top=(i-1)*25+"px";
        newcovrdiv.style.background="#FFFFFF";
        newcovrdiv.style.display="none";
        document.getElementById('paper').appendChild(newcovrdiv);
    }

}

This place has been very helpful so far.

I've just started learning Javascript, and the syntax keeps getting me. I've found an example of a javascript function that dynamically creates a div element, and I've tried to implement it in my code, but fault is found with it - but not by me. I do not know where the code is bad. Could someone point out what syntax (or worse) is wrong?

I call the function with

<body onload="creatediv()">

Here is the javascript function:

function creatediv(){

    for (i=1;i<13;i++){
        var newcovdiv = document.createElement('div');
        newcovdiv.setAttribute('id',"cover_"+i);
        newcovdiv.style.width=900;
        newcovdiv.style.height=25;
        newcovdiv.style.position="relative";
        newcovdiv.style.left=0;
        newcovdiv.style.top=(i-1)*25;
        newcovdiv.style.background="#FFFFFF";
        newcovdiv.style.display="none";
        document.getElementById('staff').appendChild(newcovdiv);
    }

    var newstaffdiv = document.createElement('div');
    newstaffdiv.setAttribute('id',"staff_sub");
    newstaffdiv.style.width=900;
    newstaffdiv.style.height=300;
    newstaffdiv.style.position="relative";
    newstaffdiv.style.left=0;
    newstaffdiv.style.top=0;
    newstaffdiv.style.background-image="url(../images/staff_sub.png);
    newstaffdiv.style.display="none";
    document.getElementbyId('staff').appendChild(newstaffdiv);

    for (i=13;i<101;i++){
        var newcovrdiv = document.createElement('div');
        newcovrdiv.setAttribute('id',"cover_"+i);
        newcovrdiv.style.width=900;
        newcovrdiv.style.height=25;
        newcovrdiv.style.position="relative";
        newcovrdiv.style.left=0;
        newcovrdiv.style.top=(i-1)*25;
        newcovrdiv.style.background="#FFFFFF";
        newcovrdiv.style.display="none";
        document.getElementById('paper').appendChild(newcovrdiv);
    }

}

There are already divs with the ids "paper" and "staff". This is my first time using the appendChild thingy, so I thought the problem might be there.

This is bothersome. I will be grateful to anyone who tries to lend me a hand.

Thanks much.

Solution

  • There are a few obvious problems with your code:

    1) You can't use background-image, because property names can't be hyphenated when using the dot form, also it's missing a ".

    style.backgroundImage

    2) All of the numeric type properties (top, left, width, height) are supposed to be css strings, so they all need to be converted to

    style.width = '900px'

    3) Your onload function calls creatediv(), however the function you posted is called letsgetiton, not sure if that's just because of the way you posted it or how it is in your actual code.

    4) document.getElement*B*yId Case matters

    You might want to look at the Chrome developer tools or firebug in firefox. That error would have popped up straight away.