javascript - JS中如何解决这个onclick事件失败的问题？

Question

我正在制作一个简单的游戏。屏幕一分为二，两侧都生成笑脸。然而，左侧又多了一张笑脸。点击它后，你应该进入下一个级别，每边还有 5 个笑脸。目标是每次找到左侧奇怪的笑脸。

但是我遇到了这个问题:未捕获的类型错误:无法设置 null 的属性“onclick”

它似乎与此行相关:theLeftSide.lastChild.onclick = function nextLevel(event){

有什么问题吗？这是我的 JS 代码的其余部分。

var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];

function generateFaces(){
    var i = 0;
    while(i < numberOfFaces){
        var top = Math.random() * 400;
        top = Math.floor(top);
        var left = Math.random() * 400;
        left = Math.floor(left);

        var face = document.createElement("img");
        face.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
        face.style.top = top + "px";
        face.style.left = left + "px";

        theLeftSide.appendChild(face);
        i++;
    }
    leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    theRightSide.appendChild(leftSideImages);
};

theLeftSide.lastChild.onclick = function nextLevel(event){
    event.stopPropagation();
    while (theLeftSide.firstChild){
        theLeftSide.removeChild(theLeftSide.firstChild);
    }
    while (theRightSide.firstChild){
        theRightSide.removeChild(theRightSide.firstChild);
    }
    numberOfFaces += 5;
    generateFaces();
};
    theBody.onclick = function gameOver(){
        alert("Game Over!");
        theBody.onclick = null;
        theLeftSide.lastChild.onclick = null;
    };

我将非常感谢您的帮助。谢谢。

Answer 1

如果 DOM 元素没有子元素，则最后一个子元素返回 null。检查并确保“#leftSide”DOM 元素有一个子元素。

来自Mozilla Developer Network :

The Node.lastChild read-only property returns the last child of the node. If its parent is an element, then the child is generally an element node, a text node, or a comment node. It returns null if there are no child elements.