mardi 7 février 2017

Creating a grid using for loops jquery

Vote count: 0

I am trying to create a 16x16 grid using jquery. I have a main div, and then I'm trying to create the grid within it. I am using for loops, but when the code below runs, I get a 16x32 grid. Could anyone explain what is going on and why that is happening?

<html>
<head>
    <title>etch-a-sketch</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
    <div id=main>
    </div>
    <script src="http://ift.tt/1g1yFpr"></script>
    <script type='text/javascript' src='app.js'></script>
</body>

#main {
height: 192px;
width: 192px;
background-color: antiquewhite;
}

.squares {
height: 10px;
width: 10px;
margin: 1px;
background-color: aquamarine;
display: inline-block;
}

$(document).ready(function() {
for(var x = 0; x < 16; x++) {
    for(var y=0; y<16; y++) {
        $("<div class='squares'></div>").appendTo('#main');
    }
}
});

asked 1 min ago

Let's block ads! (Why?)



Creating a grid using for loops jquery

Aucun commentaire:

Enregistrer un commentaire