Question

我正在做一个简单的游戏。屏幕分为两部分，两侧产生笑脸。然而，左侧还有一个笑脸。点击它之后，你应该进入下一个级别，每侧还有5个笑脸。目标是每次在左侧找到奇怪的笑脸。

我有这个问题，但是：未捕获的TypeError：无法将属性'onclick'设为null

它似乎与这一行有关： 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。检查以确保＆＃34;＃leftSide＆＃34; DOM元素有一个孩子。

来自Mozilla Developer Network：

Node.lastChild只读属性返回节点的最后一个子节点。如果其父元素是元素，则子元素通常是元素节点，文本节点或注释节点。如果没有子元素，则返回null。

如何克服JS中的onclick事件失败？

1 个答案: