Javascript 单击“不工作”时将div追加到文档中，原因是什么？_Javascript_Jquery_Html_Css

Javascript 单击“不工作”时将div追加到文档中，原因是什么？

javascript jquery html css

Javascript 单击“不工作”时将div追加到文档中，原因是什么？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试创建一个按钮，单击它可以在文档上创建一个具有所述高度和宽度的div。通过给div.style.left和div.style.top提供一个随机数，div将具有随机位置。它坏了，你能告诉我为什么吗？我真的很感激。多谢各位 <html> <head> <title></title> </head> <body> <button id = "button" oncl

我正在尝试创建一个按钮，单击它可以在文档上创建一个具有所述高度和宽度的div。通过给div.style.left和div.style.top提供一个随机数，div将具有随机位置。它坏了，你能告诉我为什么吗？我真的很感激。多谢各位

 <html>
    <head>
    <title></title>

    </head>


    <body>

    <button id = "button" onclick = "addMonster()">add monster</button>
    <div id = "square">
    </div>

    <style>
    #square {
      width: 100px;
      height: 100px;
      background-color: white;
      border: 2px solid black;
      font-size:20px;
      color: black;
      position:absolute;
      left: 50px;   
      top: 80px;
    }


    * {
    box-sizing: border-box;
    }

    body, html {
    margin: 0;
    padding: 0;
    }



    </style>
    <script>

    var monster = {
    height: 0,
    width: 0,
    top: 0,
    left: 0
    };

    function addMonster() {
    monster.height = 100;
    monster.width = 100;
    monster.left = Math.floor((Math.random() * 100) + 1);
    monster.top = Math.floor((Math.random() * 100) + 1);

    var div = document.createElement('div');
    document.body.appendChild(div);

    div.style.width = monster.width + "px";
    div.style.height = monster.height + "px";
    div.style.left = monster.left + "px";
    div.style.top = monster.top + "px";
    div.style.backgroundColor = "red";
    div.style.border = 2px solid red;
    div.innerHTML = "hello";
    };





    </script>
    </body>

    </html>


添加怪物
#方格{
宽度：100px；
高度：100px；
背景色：白色；
边框：2件纯黑；
字体大小：20px；
颜色：黑色；
位置：绝对位置；
左：50px；
顶部：80px；
}
* {
框大小：边框框；
}
正文，html{
保证金：0；
填充：0；
}
变量怪物={
高度:0,，
宽度：0，
排名：0，
左：0
};
函数addMonster（）{
怪物身高=100；
宽度=100；
monster.left=Math.floor（（Math.random（）*100）+1）；
monster.top=Math.floor（（Math.random（）*100）+1）；
var div=document.createElement（'div'）；
文件.正文.附件（div）；
div.style.width=monster.width+“px”；
div.style.height=monster.height+“px”；
div.style.left=monster.left+“px”；
div.style.top=monster.top+“px”；
div.style.backgroundColor=“红色”；
div.style.border=2px纯红色；
div.innerHTML=“你好”；
};

您的代码中有一个错误，导致无法定义

addMonster（）

方法

用引号将

2px纯红

括起来，事情应该会按预期进行

我建议您学习在浏览器中使用开发人员控制台，这可以帮助您轻松地找出此类错误。祝你好运

此行导致代码中断

div.style.border = 2px solid red;

应该是

div.style.border = "2px solid red";

注意：始终检查开发人员控制台是否存在错误、未定义变量、意外标识符等问题，使用它可以轻松调试

var monster={
高度:0,，
宽度：0，
排名：0，
左：0
};
函数addMonster（）{
怪物身高=100；
宽度=100；
monster.left=Math.floor（（Math.random（）*100）+1）；
monster.top=Math.floor（（Math.random（）*100）+1）；
var div=document.createElement（'div'）；
文件.正文.附件（div）；
div.style.width=monster.width+“px”；
div.style.height=monster.height+“px”；
div.style.left=monster.left+“px”；
div.style.top=monster.top+“px”；
div.style.backgroundColor=“红色”；
div.style.border=“2px纯红色”；
div.innerHTML=“你好”；
};
#正方形{
宽度：100px；
高度：100px；
背景色：白色；
边框：2件纯黑；
字体大小：20px；
颜色：黑色；
位置：绝对位置；
左：50px；
顶部：80px；
}
* {
框大小：边框框；
}
身体，
html{
保证金：0；
填充：0；
}

添加怪物
使用浏览器控制台进行调试。你有sytax错误“不工作”是什么意思？