Question

大家好！我是html / css / javascript的新手。我正在学习Coursera的这类课程。在程序中，我尝试使用＆＃34; theRightSide＆＃34;复制＆＃34; theLeftSide＆＃34;并删除＆＃34; theRightSide＆＃34;中的最后一张图片。我已经尝试了两天的每一种方法。但无法修复它。 Chrome表示＆＃34; Uncaught TypeError：无法读取属性＆＃39; parentNode＆＃39; of null＆＃34;。谁能告诉我这个bug在哪里？非常感谢!!!

    <!DOCTYPE html>
    <html>
    <head>
        <title>Document</title>
        <style>
            img {position: absolute;}
            div {position: absolute;width: 500px;height: 500px;}
            #rightside {left: 500px;border-left: 1px solid black;}
        </style>
    </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>
        <script>
            var numberOfFaces=5;
            var theLeftSide=document.getElementById("leftside");
            var theRightSide=document.getElementById("rightside");

            function generateFaces(){
                for (var i = 0; i <numberOfFaces; i++) {
                    var pic=document.createElement("img");
                    pic.src="smile.png";
                    pic.style.top=Math.random()*400+"px";
                    pic.style.left=Math.random()*400+"px";
                    theLeftSide.appendChild(pic);

                };
            }
            var leftSideImages=theLeftSide.cloneNode(true);
            var last_child=leftSideImages.lastChild;
            last_child.parentNode.removeChild(last_child);
            theRightSide.appendChild(leftSideImages);       
        </script>
    </body>
    </html>

Answer 1

在评论中解释 @adeneo ： body.onload事件处理程序稍后会在主体完成加载时触发，而当您将元素添加到左侧时，但是你正试图在页面加载时移动这些元素，当它们还没有时。

所以你需要做的是在追加那些子节点的循环之后（在函数leftside内）添加使用generateFaces()子节点的代码，这样它就可以找到这些子节点。

希望这有帮助。

Answer 2

将lastchild放在body load函数中：

function generateFaces(){
            for (var i = 0; i <numberOfFaces; i++) {
                var pic=document.createElement("img");
                pic.src="smile.png";
                pic.style.top=Math.random()*400+"px";
                pic.style.left=Math.random()*400+"px";
                theLeftSide.appendChild(pic);

            };
            var leftSideImages=theLeftSide.cloneNode(true);
            var last_child=leftSideImages.lastChild;
            last_child.parentNode.removeChild(last_child);
            theRightSide.appendChild(leftSideImages); 
        }

在拍摄图像之前触发。函数generateFaces（）在加载正文后开始，但其余的代码尽快运行，所以当它运行时，它还没有孩子。希望它有所帮助。

Answer 3

该函数的运行时间晚于它下面的代码，如果在分配之后记录leftSideImages的值，则会看到它不包含子代。

这样做的一种方法是将代码放在函数中。

代码：

            var numberOfFaces=5;
            var theLeftSide=document.getElementById("leftside");
            var theRightSide=document.getElementById("rightside");

            function generateFaces(){
                for (var i = 0; i <numberOfFaces; i++) {
                    var pic=document.createElement("img");
                    pic.src="smile.png";
                    pic.style.top=Math.random()*400+"px";
                    pic.style.left=Math.random()*400+"px";
                    theLeftSide.appendChild(pic);

                };

                var leftSideImages=theLeftSide.cloneNode(true);
                console.log(leftSideImages);
                var last_child=leftSideImages.lastChild;
                last_child.parentNode.removeChild(last_child);
                theRightSide.appendChild(leftSideImages); 
            }

Example

使用javascript删除元素

3 个答案: