Question

我有一个简单的javascript代码，想要随机生成img。我的代码是：

<html>
<head>
<style>
    img{
        position: absolute;
    }
    div{
        position: absolute;
        width: 500px;
        height: 500px;
    }
    #rightSide { left: 500px; 
                border-left: 1px solid black;
    }

</style>
<script>
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");
    function generateFaces(){
        for (var i = 0; i < numberOfFaces; i++){
            var img = document.createElement("img");
            img.src = "smile.png";

            var randomTop = Math.random() * 400;
            var randomLeft = Math.random() * 400;
            img.style.top = randomTop + "px";
            img.style.left = randomLeft + "px";
            document.getElementById("leftSide").appendChild(img);
        }

    }
    window.onload = generateFaces();
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>click on the extra smiling face on the left</p>
<div id = "leftSide">
</div>
<div id = "rightSide">
</div>
</body>

</html>

错误消息是＆＃34;无法读取属性＆＃39; appendChild＆＃39;为null 在generateFaces＆＃34;，但我的形象＆＃34; smile.png＆＃34;与html在同一目录中，所以路径是正确的，有什么问题？谢谢！

Answer 1

将window.onload = generateFaces();更改为

document.addEventListener("DOMContentLoaded", generateFaces);

＆＃13;

<html>

<head>
  <style>
    img {
      position: absolute;
    }
    
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>
  <script>
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");

    function generateFaces() {
      for (var i = 0; i < numberOfFaces; i++) {
        var img = document.createElement("img");
        img.src = "smile.png";

        var randomTop = Math.random() * 400;
        var randomLeft = Math.random() * 400;
        img.style.top = randomTop + "px";
        img.style.left = randomLeft + "px";
        document.getElementById("leftSide").appendChild(img);
      }

    }
    document.addEventListener("DOMContentLoaded", generateFaces);
  </script>
</head>

<body>
  <h1>Matching Game</h1>
  <p>click on the extra smiling face on the left</p>
  <div id="leftSide">
  </div>
  <div id="rightSide">
  </div>
</body>

</html>

＆＃13;

Answer 2

您尝试通过调用generateFaces函数而不是引用它来设置处理程序; generateFaces()应为generateFaces。

由于该错误，过早调用document.getElementById("leftSide")并返回null，因为该元素尚未存在。

Answer 3

我发现您的代码工作正常，我只是在script标记之前编写了</body>标记并且它有效。这是工作代码

＆＃13;

<html>

<head>
  <style>
    img {
      position: absolute;
      height: 100px;
      width: 100px;
    }
    
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>

</head>

<body>
  <h1>Matching Game</h1>
  <p>click on the extra smiling face on the left</p>
  <div id="leftSide">
  </div>
  <div id="rightSide">
  </div>



  <script>
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");

    function generateFaces() {
      for (var i = 0; i < numberOfFaces; i++) {
        var img = document.createElement("img");
        img.src = "https://vignette2.wikia.nocookie.net/39cluesidea/images/2/26/Smile.png/revision/latest?cb=20110217131619";

        var randomTop = Math.random() * 400;
        var randomLeft = Math.random() * 400;
        img.style.top = randomTop + "px";
        img.style.left = randomLeft + "px";
        theLeftSide.appendChild(img);
      }

    }
    window.onload = generateFaces();
  </script>
</body>

</html>

＆＃13;

html img不能是appendChild（）

3 个答案: