jquery - javascript not working to create divs inside of another div -
i trying create 10 divs when button clicked, nothing happening. think issue javascript, nothing shown in console. doing wrong? , can fix it? 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> javascript
var row1 = []; $(document).ready(function() { $('#startbtn').click(function(){ (var = 0; i<9; i++) { row1[i] = document.createelement('div'); row1[i].classname = 'grid'; document.getelementbyid('game').appendchild(row1[i]); } }); }); 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; }
you need unhide game div:
$('#startbtn').click(function(){ (var = 0; i<9; i++) { row1[i] = document.createelement('div'); row1[i].classname = 'grid'; document.getelementbyid('game').appendchild(row1[i]); } $("#game").show(); });
Comments
Post a Comment