Question

使用 javascript 创建 div 不起作用

2014-05-30

85

javascript jquery html css

我尝试在单击另一个 div 时创建 div，但什么也没发生，控制台也没有显示任何内容。我已进行研究，但未找到任何相关信息。如能提供任何帮助，我将不胜感激。

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]);
        }
    }   
    });
});

Answer 1

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

id 属性在文档中必须是唯一的。您不能创建 9 个具有相同 grid id 的 div。

Answer 2

您必须设置唯一的 ID。一个简单的方法是在 ID 上添加计数变量：

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

编辑

我注意到了可能让您感到困惑的地方。您希望 div 的 ID 为 grid ，因此您需要为它们设置相同的样式。我从您的 css #grid 中获取了这一点。

您应该通过 css 类来实现这一点。将 css 样式从 #grid 更改为 .grid ，然后将此类添加到创建的 div（记住要使 ID 唯一）：

    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]);
    }