Question

我正在尝试在点击另一个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属性在文档中必须是唯一的。您无法创建具有相同ID grid的9个div。

Answer 2

您必须设置唯一ID。一种简单的方法是在id：

上添加count变量

    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，所以你要将它们设置为同样的样式。我从你的#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]);
    }

使用javascript无法创建div

2 个答案: