I am having trouble generating new divs when a specific div is clicked. Despite my efforts, nothing seems to be happening and the console isn't showing any errors. I've searched online for solutions but haven't found anything that addresses my issue. Any assistance on this matter 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]);
}
}
});
});