无法读取属性'appendChild'为null

Cannot read property 'appendChild' of null

本文关键字：null appendChild 读取 属性      更新时间：2023-09-26

这是我的代码，我是java脚本的初学者。

<!doctype html>
<html>
    <head>
        <style>
            div {position:absolute; width:500px; height:500px}
            img {position:absolute}
            #rightSide { left: 500px;
            border-left: 1px solid black }
        </style>
        <script>
           function generateFaces() {
               var numberOfFaces = 5;
               var theLeftSide = document.getElementById("leftSide");
               var theRightSide = document.getElementById("rightside");
               for (var i = 1; i <= numberOfFaces; i++) {
                   this_img = document.createElement("img");
                   this_img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
                   var topIndex = Math.floor(Math.random() * 401);
                   var leftIndex = Math.floor(Math.random() * 401);
                   this_img.style.top = topIndex + "px";
                   this_img.style.left = leftIndex + "px";
                   this_img.style.position = "absolute";
                   theLeftSide.appendChild(this_img);
                   theLeftimages = document.cloneNode(true);
                   theLeftimages = theLeftimages.removeChild(theLeftimages.lastChild);
                   theRightSide.appendChild(theLeftimages);
               };
           }
        </script>
    </head>
    <body onload = "generateFaces()">
      <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>

出现问题的部分是函数生成面

function generateFaces() {
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");
    var theRightSide = document.getElementById("rightside");
    for (var i = 1; i <= numberOfFaces; i++) {
        this_img = document.createElement("img");
        this_img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
        var topIndex = Math.floor(Math.random() * 401);
        var leftIndex = Math.floor(Math.random() * 401);
        this_img.style.top = topIndex + "px";
        this_img.style.left = leftIndex + "px";
        this_img.style.position = "absolute";
        theLeftSide.appendChild(this_img);
        theLeftimages = document.cloneNode(true);
        theLeftimages = theLeftimages.removeChild(theLeftimages.lastChild);
        theRightSide.appendChild(theLeftimages);
    };
}

当我使用RightSide.appendChild（Leftimages）追加子图像时；它显示错误为

未捕获的TypeError:无法读取null的属性"appendChild"。

并且我无法将图像克隆到右侧分区。

Javascript区分大小写。应该是右侧

var theRightSide = document.getElementById("rightSide");

由于它没有得到元素，所以它向RightSide返回Null，而Rightside显然没有appendChild函数：）

document.getElementById(...)如果找不到具有给定id的元素，将返回null。

// You need to change:
var theRightSide = document.getElementById("rightside");
// To:
var theRightSide = document.getElementById("rightSide");
                                              // ^ See capital 'S'
相关文章：