0
Uncaught 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, и столкнулся с проблемой, при этом задания. Это игра соответствия фактам, и вам нужно щелкнуть дополнительное лицо с левой стороны, и игра продолжается, пока вы не нажмете на другое место, кроме дополнительного лица слева. Выше находится файл HTML, и в него встроен JS-код.
Я получаю сообщение об ошибке, как: Uncaught TypeError: Cannot read property 'lastChild' of null в строке номер 48, который является onclick событие функции обработчика на lastChild из THE_LEFT_SIDE дел. Я не знаю, как это происходит и в чем проблема с моим кодом? Любые провода будут оценены.
Похоже 'THE_LEFT_SIDE 'равно нулю, когда вы пытаетесь добавить слушателя. Попробуйте добавить дополнения слушателя в функцию, которая выполняется после 'generateFaces()' – Todd
'THE_LEFT_SIDE' пуст, пока функция' generateFaces' не будет вызываться 'onload'' body'. Поместите код обработчика событий внутри '
' в последнюю или внутреннюю функцию 'generateFaces'. –