0
Uncaught Typeerror: kann Eigenschaft lesen 'lastchild' von null
<!DOCTYPE html>
<html>
<head>
\t <title>Face Matching Game</title>
\t <h2>Matching Game</h2>
\t <p>Click on the EXTRA face on the left side</p>
\t <style type="text/css">
\t \t div { position: absolute; width: 640px; height: 550px; background-color: maroon }
\t \t img { position: absolute; width: 100px; height: 100px}
\t \t #rightSide { left: 650px; border-left: 2px solid black; }
\t </style>
\t <script type="text/javascript">
\t \t var NUM_OF_FACES = 0;
\t \t var THE_LEFT_SIDE, THE_RIGHT_SIDE;
\t \t //Function to generate faces
\t \t function generateFaces() {
\t \t \t THE_LEFT_SIDE = document.getElementById("leftSide");
\t \t \t THE_RIGHT_SIDE = document.getElementById("rightSide");
\t \t \t NUM_OF_FACES += 5;
\t \t \t var image;
\t \t \t while(NUM_OF_FACES>0){
\t \t \t \t image = document.createElement("img");
\t \t \t \t image.src = "smile.png";
\t \t \t \t image.style.top = Math.floor(Math.random()* (THE_LEFT_SIDE.offsetHeight - 100)) + "px";
\t \t \t \t image.style.left = Math.floor(Math.random()* (THE_LEFT_SIDE.offsetWidth - 100)) + "px";
\t \t \t \t THE_LEFT_SIDE.appendChild(image);
\t \t \t \t NUM_OF_FACES -= 1;
\t \t \t \t //console.log(image.style.top, image.style.left)
\t \t \t }
\t \t \t var leftSideImages = THE_LEFT_SIDE.cloneNode(true);
\t \t \t leftSideImages.removeChild(leftSideImages.lastChild);
\t \t \t THE_RIGHT_SIDE.appendChild(leftSideImages);
\t \t }//end generatefaces()
\t \t function deleteFaces(argument) {
\t \t \t while(THE_LEFT_SIDE.firstChild){
\t \t \t \t THE_LEFT_SIDE.removeChild(THE_LEFT_SIDE.firstChild);
\t \t \t }
\t \t \t while(THE_RIGHT_SIDE.firstChild){
\t \t \t \t THE_RIGHT_SIDE.removeChild(THE_RIGHT_SIDE.firstChild);
\t \t \t }
\t \t }//end deleteFaces()
\t \t var theBody = document.getElementsByTagName("body")[0];
\t \t THE_LEFT_SIDE = document.getElementById("leftSide");
\t \t THE_RIGHT_SIDE = document.getElementById("rightSide");
\t \t //Event handling
\t \t THE_LEFT_SIDE.lastChild.onclick = function goToNextLevel() {
\t \t \t alert("You clicked on correct face.");
\t \t \t deleteFaces();
\t \t \t generatefaces();
\t \t };
\t \t theBody.onclick = function gameOver() {
\t \t \t alert("Game Over!!");
\t \t \t theBody.onclick = null;
\t \t \t THE_LEFT_SIDE.lastChild.onclick = null;
\t \t };
\t </script>
</head>
<body onload="generateFaces()">
\t <div id="leftSide"></div>
\t <div id="rightSide"></div>
</body>
</html>ich Anfänger bin in Javascript und lief in ein Problem, während eine Zuordnung zu tun. Es ist Fact Matching Spiel und Sie müssen auf das zusätzliche Gesicht auf der linken Seite klicken und das Spiel geht weiter, bis Sie irgendwo anders als extra Gesicht auf der linken Seite klicken. Oben ist die HTML-Datei und der JS-Code eingebettet.
Ich erhalte eine Fehlermeldung wie: Uncaught TypeError: Cannot read property 'lastChild' of null bei der Zeilennummer 48, die auf lastChild von THE_LEFT_SIDE div onclick Event-Handler-Funktion ist. Ich weiß nicht, wie es kommt und was ist das Problem mit meinem Code? Alle Leads werden geschätzt.
Sieht aus wie 'THE_LEFT_SIDE 'ist zu dem Zeitpunkt null, zu dem Sie versuchen, einen Listener hinzuzufügen. Versuchen Sie, die Listener-Additionen in eine Funktion einzufügen, die nach 'generateFaces()' ausgeführt wird. – Todd
Das 'THE_LEFT_SIDE' ist leer, bis die 'generateFaces'-Funktion bei' onload' von 'body' aufgerufen wird. Setzen Sie den 'event handlers' Code in'
'in der letzten oder innerhalb der' generateFaces' Funktion. –