Question

我正在写一个简单的html + js脚本，左边有一些图像，右边有一些图像，点击一个正确的元素（div的最后一个孩子）在左右两侧添加图像（+每次5）。这是代码：

<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>

然而它给了我一个错误：

Uncaught TypeError: Cannot read property 'appendChild' of undefined

此外，我还编写了删除图像的代码，但这也无效。

Answer 1

试试这个：

valueForKey

将图像设置为<!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>会将图像放在彼此

上

Answer 2

更改功能参数名称

<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 个答案: