0
キャッチされない例外TypeError：プロパティを読み取ることができません「lastChild」ヌル
<!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>の私はJavaScriptで初心者ですと割り当てを行っているときに問題に遭遇しました。 Fact Matchingゲームで、左側の余分な顔をクリックしなければならず、左の余分な顔以外をクリックするまでゲームが続きます。 上にHTMLファイルがあり、JSコードが埋め込まれています。
私はエラーを取得しています：lastChildTHE_LEFT_SIDEのdiv要素にonclickイベントハンドラ関数で行番号48、でUncaught TypeError: Cannot read property 'lastChild' of null。私はそれがどのように来ているのか分かりませんし、私のコードの問題は何ですか？ いずれのリードも感謝します。
はTHE_LEFT_SIDE 'のように見えますリスナーを追加しようとしているときは 'nullです。 'generateFaces（）'の後に実行される関数にリスナーの追加を入れてみてください。 – Todd
'body'の' onload'で 'generateFaces'関数が呼び出されるまで' THE_LEFT_SIDE'は空です。最後のまたは 'generateFaces'関数の中に'
'の中に'イベントハンドラ 'コードを入れてください。 –