如何解决以下JS错误？

Question

I am writing a simple html + js script which has a few images on left sides and one less on right side and on clicking a correct element(last child of the div) adds the images on both right and left sides(+5 everytime). 我正在编写一个简单的html + js脚本，该脚本的左侧有一些图像，右侧少了一些，单击正确的元素（div的最后一个子元素）会在右侧和左侧同时添加图像（每次+5）。 Here's the code: 这是代码：

<html>
    <head>
    <style type="text/css">
        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>
        <div id="leftSide"></div>
        <div id="rightSide"></div>
        <script>
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            generateFaces(theLeftSide);
            function generateFaces(theLeftSide) {
                for (var i = 0; i < numberOfFaces; i++) {
                var img = document.createElement("IMG");
                img.src="smile.png";
                img.style.top = Math.floor(Math.random() * 401);
                img.style.height = 100;
                img.style.left = Math.floor(Math.random() * 401);
                theLeftSide.appendChild(img);
            };

        }

            leftSideImages = theLeftSide.cloneNode(true);
            var theRightSide = document.getElementById("rightSide");
            leftSideImages.removeChild(leftSideImages.lastChild);
            theRightSide.appendChild(leftSideImages);

            var theBody = document.getElementsByTagName("body")[0];
            theLeftSide.lastChild.onclick= function nextLevel(event){ 
                theLeftSide.innerHTML='';
                theRightSide.innerHTML='';
                event.stopPropagation(); 
                numberOfFaces += 5; 
                generateFaces(); 

            /*  while(theLeftSide.firstChild)
                {
                    theLeftSide.removeChild(theLeftSide.firstChild);
                }
                while(theRightSide.firstChild)
                {
                    theRightSide.removeChild(theRightSide.firstChild);
                }*/1

            };
            theBody.onclick = function gameOver() {
                alert("Game Over!");
                theBody.onclick = null;
                theLeftSide.lastChild.onclick = null;
                }; 

        </script>



        </script>
    </body>
</html>

However it's giving me an error: 但是，这给了我一个错误：

Uncaught TypeError: Cannot read property 'appendChild' of undefined

Also I have written code for deleting the images, this is also not working. 我也写了删除图像的代码，这也不起作用。

Answer 1

Try this: 尝试这个：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    /*img {
        position:absolute;
    }*/

    div {
        position:absolute;
        width:500px; 
        height:500px;
    }

    #rightSide { left: 500px; 
        border-left: 1px solid black; 
    }


</style>

</head>
<body>
    <h1>Matching Game</h1>
    <div id="leftSide"></div>
    <div id="rightSide"></div>
    <script src="jquery.js"></script>
    <script>
        var numberOfFaces = 5;
        var theLeftSide = document.getElementById("leftSide");
        generateFaces();
        function generateFaces() {
            for (var i = 0; i < numberOfFaces; i++) {
                (function(i) {
                    var img = document.createElement("img");
                    img.src="smile.png";
                    // img.style.top = Math.floor(Math.random() * 401);
                    img.style.height = 100;
                    // img.style.left = Math.floor(Math.random() * 401);
                    console.log('img');
                    theLeftSide.appendChild(img);
                }(i));
                console.log("running");

            };
        }

        leftSideImages = theLeftSide.cloneNode(true);
        var theRightSide = document.getElementById("rightSide");
        leftSideImages.removeChild(leftSideImages.lastChild);
        theRightSide.appendChild(leftSideImages);

        var theBody = document.getElementsByTagName("body")[0];
        theLeftSide.lastChild.onclick= function nextLevel(event){ 
            theLeftSide.innerHTML='';
            theRightSide.innerHTML='';
            event.stopPropagation(); 
            numberOfFaces += 5; 
            generateFaces(); 

          while(theLeftSide.firstChild)
            {
                theLeftSide.removeChild(theLeftSide.firstChild);
            }
            while(theRightSide.firstChild)
            {
                theRightSide.removeChild(theRightSide.firstChild);
            }

        };
        theBody.onclick = function gameOver() {
            alert("Game Over!");
            theBody.onclick = null;
            theLeftSide.lastChild.onclick = null;
            }; 

    </script>
</body>
</html>

setting the images to absolute would put the images over eachother 将图像设置为absolute会使图像彼此重叠

Answer 2

change your function parameter name 更改您的功能参数名称

<html>
    <head>
    <style type="text/css">
        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>
        <div id="leftSide"></div>
        <div id="rightSide"></div>
        <script>
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            generateFaces(theLeftSide);
            function generateFaces(the_Lef_tSide) {
                for (var i = 0; i < numberOfFaces; i++) {
                var img = document.createElement("IMG");
                img.src="smile.png";
                img.style.top = Math.floor(Math.random() * 401);
                img.style.height = 100;
                img.style.left = Math.floor(Math.random() * 401);
                theLeftSide.appendChild(img);
            };

        }

            leftSideImages = theLeftSide.cloneNode(true);
            var theRightSide = document.getElementById("rightSide");
            leftSideImages.removeChild(leftSideImages.lastChild);
            theRightSide.appendChild(leftSideImages);

            var theBody = document.getElementsByTagName("body")[0];
            theLeftSide.lastChild.onclick= function nextLevel(event){ 
                theLeftSide.innerHTML='';
                theRightSide.innerHTML='';
                event.stopPropagation(); 
                numberOfFaces += 5; 
                generateFaces(); 

            /*  while(theLeftSide.firstChild)
                {
                    theLeftSide.removeChild(theLeftSide.firstChild);
                }
                while(theRightSide.firstChild)
                {
                    theRightSide.removeChild(theRightSide.firstChild);
                }*/1

            };
            theBody.onclick = function gameOver() {
                alert("Game Over!");
                theBody.onclick = null;
                theLeftSide.lastChild.onclick = null;
                }; 

        </script>



        </script>
    </body>
</html>

如何解决以下JS错误？

问题描述

2 个解决方案

解决方案1
0 2015-11-14 14:21:06

解决方案2
0 2015-11-14 14:23:20

如何解决以下JS错误？

问题描述

2 个解决方案

解决方案1 0 2015-11-14 14:21:06

解决方案2 0 2015-11-14 14:23:20

解决方案1
0 2015-11-14 14:21:06

解决方案2
0 2015-11-14 14:23:20