Create divs with javascript not working

Question

I am trying to create divs when another div is clicked, but nothing is happening, and the console says nothing. I have done research and haven't been able to find anything on this. Any help would be greatly appreciated.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
        Space Invaders
        </title>
        <script type = 'text/javascript' src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="script.js" type="text/javascript">               </script>
    </head>
    <body>
    <div>
        <div id="startbtn"><br />Start Game
        </div>
        <br />
        <center>
        <div id="game" onClick = 'buttonClick'>
        </div>
        <div id="game2">
        </div>
        </center>
        <div id="titlepage">
        </div>
    </div>
    </body>
</html>

CSS

#startbtn
{
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #000000;
    font-family: Arial;
    opacity: 0.5;
    margin: auto;
}
#game { 
    display: none;
    margin: auto;
}
#game2
{ 
    display: none;
    margin: auto;
}
#grid {
    display: inline-block;
    background-color: #000000;
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

JavaScript

var row1 = [];
$(document).ready(function() 
{
    $('#startbtn').click(function(){
        for (var i = 0; i<9; i++)
    {
        row1[i] = document.createElement('div');
        row1[i].id = 'grid';
        document.getElementById('game').appendChild(row1[i]);
        }
    }   
    });
});

Id's must be unique....

Wilfredo P
– Wilfredo P

2014-05-30 19:17:03 +00:00
Commented May 30, 2014 at 19:17 — Wilfredo P
– Wilfredo P, Commented May 30, 2014 at 19:17
You have posted the Javascript in the HTML's place

LcSalazar
– LcSalazar

2014-05-30 19:19:02 +00:00
Commented May 30, 2014 at 19:19 — LcSalazar
– LcSalazar, Commented May 30, 2014 at 19:19

user229044 · Accepted Answer · 2014-05-30 19:17:10Z

2

for (var i = 0; i<9; i++)
{
    row1[i] = document.createElement('div');
    row1[i].id = 'grid';

The id attribute needs to be unique within the document. You can't create 9 divs with the same id of grid.

answered May 30, 2014 at 19:17

user229044♦

241k41 gold badges347 silver badges350 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LcSalazar · Accepted Answer · 2014-05-30 19:21:02Z

You have to set unique id's. An easy way to do so, is to add the count variable on the id:

    for (var i = 0; i<9; i++)
    {
        row1[i] = document.createElement('div');
        row1[i].id = 'grid' + i;
        document.getElementById('game').appendChild(row1[i]);
    }

EDIT

I've noticed what might have confused you. You wanted the div's ids to be grid, so you would style them all the same. I took that from your css #grid.

You should do that by css classes. Change the css style from #grid to .grid, then add this class to the created divs (Remember to make the ids unique):

    for (var i = 0; i<9; i++)
    {
        row1[i] = document.createElement('div');
        row1[i].id = 'grid' + i;
        row1[i].className = 'grid';
        document.getElementById('game').appendChild(row1[i]);
    }

Collectives™ on Stack Overflow

Create divs with javascript not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related