Question

我试图使用按钮上的onclick来调用函数complete，它应该创建一个带有下面提到的属性的div。但是，当我试图运行它时，我没有看到输出显示。我尝试了很多东西，但目前还不确定。任何帮助将不胜感激

<!DOCTYPE html>
<html>
    <button id ="button1" type="button" onclick="complete()">Run</button>
    <script>
        function complete(){
            var x= Math.floor(Math.random()*501)
            var y=Math.floor(Math.random()*501)
            var divx = document.createElement("div");
            divx.style.position = "fixed";
            divx.style.bottom = (150+x).toString();
            divx.style.right = (900+y).toString();
            divx.style.background="green";
            divx.style.width = "10px";
            divx.style.height = "10px";
            divx.style.border = "1px solid #000";
            document.body.appendChild(div);
        }
    </script>
</html>

Answer 1

您的代码运行正常，只是在div之后添加document.body.appendChild(div);而错过了：

document.body.appendChild(divx);

应该是：

div

由于未定义变量<body>，您还应将代码放在<!DOCTYPE html> <html> <body> <button id ="button1" type="button" onclick="complete()">Run</button> <script> function complete(){ var x= Math.floor(Math.random()*501) var y=Math.floor(Math.random()*501) var divx = document.createElement("div"); divx.style.position = "fixed"; divx.style.bottom = (150+x).toString(); divx.style.right = (900+y).toString(); divx.style.background="green"; divx.style.width = "10px"; divx.style.height = "10px"; divx.style.border = "1px solid #000"; document.body.appendChild(divx); } </script> </body> </html>标记内，以获取有效的HTML代码。

希望这有帮助。

{{1}}

Answer 2

您的第document.body.appendChild(div);行使用未定义的变量div，而是将您的div命名为xdiv，因此请将其用作参数。

请记住，大多数浏览器都支持通常可通过F12访问的控制台，该控制台显示由JavaScript触发的错误消息。在您的情况下，它显示：

test.html:16 Uncaught ReferenceError: div is not defined

当出现行为异常时，检查错误日志是一个好主意，通常它会准确地说明包含行号的错误。

在设置两个偏移（bottom和right）时，您还必须将单位附加为字符串，可能是px。例如：

divx.style.bottom = (150+x).toString() + "px";

Answer 3

错误：

document.body.appendChild(div);应为document.body.appendChild(divx);

建议：

虽然不正确，但您不应在HTML中使用onclick="complete()"。在JS代码中使用addEventListener("click", complete, false)附加事件监听器要好得多。

改进代码：

＆＃13;

function complete(){
    var x= Math.floor(Math.random()*501)
    var y=Math.floor(Math.random()*501)
    var divx = document.createElement("div");
    divx.style.position = "fixed";
    divx.style.bottom = (150+x).toString();
    divx.style.right = (900+y).toString();
    divx.style.background="green";
    divx.style.width = "10px";
    divx.style.height = "10px";
    divx.style.border = "1px solid #000";
    document.body.appendChild(divx);
}

document.getElementById('button1').addEventListener("click", complete, false);

＆＃13;

<button id ="button1" type="button">Run</button>

＆＃13;

（另见this Fiddle）

Answer 4

document.body.appendChild(div); 应该 document.body.appendChild(divx);因为div未定义

<!DOCTYPE html>
<html>

<body>
  <button id="button1" type="button" onclick="complete()">Run</button>
  <script>
    function complete() {
      var x = Math.floor(Math.random() * 501)
      var y = Math.floor(Math.random() * 501)
      var divx = document.createElement("div");
      divx.style.position = "fixed";
      divx.style.bottom = (150 + x).toString();
      divx.style.right = (900 + y).toString();
      divx.style.background = "green";
      divx.style.width = "10px";
      divx.style.height = "10px";
      divx.style.border = "1px solid #000";
      document.body.appendChild(divx);
    }
  </script>
</body>

</html>

如何在JavaScript上创建和设置div

4 个答案:

错误：

建议：

改进代码：