Не определяет элемент lastChild

Stojan · December 3, 2015

Уважаемые форумчане!
Просьба помочь со скриптом.
Краткая информация о скрипте:
1. Скрипт генерит 5 элементов img и добавляет их в один из двух пустых div.
2. Скрипт копирует все элементы из одного div в другой, при этом удаляя один элемент img. Получаем 5 и 4 элемента img в двух div.
До этого момента все гладко.

Далее скрипт должен при нажатии на lastChild левого div, которым является один из img удалять всех child из обоих div и генерить уже 10 и 9 соответственно (по схеме выше).

Или, при нажатии на любой другой child в div кроме последнего, выдавать сообщение.

Вот проблема заключается в том, что не получается прописать событие onclick на последнем child'e одного из div, чтобы произошел вызов функции.

Заранее благодарю за помощь.

Это проблемный участок скрипта:

""""

theLeftSide.lastChild.onclick= function nextLevel(){

// onclick.stopPropagation();
numberOfFaces += 5;
//delete all childNodes
while(theBody.firstChild){theBody.removeChild(theB ody.firstChild);
generateFaces();
}}

""""

Весь скрипт:

<!doctype html>
<html>
<head>
<style>
#rightSide { left: 500px;
border-left: 2px solid black;
width:500px; height:500px;
position:absolute ;}
#leftSide {width:500px; height:500px;position:absolute;}
img{position:absolute;}
</style>
<meta charset="utf-8">
<title>Matching Game</title>
<script>
numberOfFaces =5;
theLeftSide=document.getElementById("leftSide");
theRightSide =document.getElementById("rightSide");
theBody = document.getElementsByTagName("body")[0];

function generateFaces() {
//1st for(i=1;i<=numberOfFaces;i++){
//2nd
var i=1;
while(i<=numberOfFaces){
//
var image=document.createElement("img");
image.src="smile.png";
image.style.top=Math.floor(Math.random()*401)+"px";
image.style.left=Math.floor(Math.random()*401)+"px";
leftSide.appendChild(image);
i++;
}
var leftSideImages = leftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
rightSide.appendChild(leftSideImages);
//part3 end

}

theLeftSide.lastChild.onclick= function nextLevel(){
// onclick.stopPropagation();
numberOfFaces += 5;
//delete all childNodes
while(theBody.firstChild){theBody.removeChild(theBody.firstChild);
generateFaces();
}
}
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
}
</script>
</head>
<body onLoad="generateFaces()">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>

Igor Schnaider · December 3, 2015

Так вы же пытаетесь повесить обработчик на несуществующую ноду, а только потом генерируете картинки.

Либо делайте это после, но лучше, как указал Great Rash, использовать делегирование.

Great Rash · December 3, 2015

1) запилите живой пример на codepen.io

2) если у вас чилды всё время меняются, то и обработчик события нужно всё время заново устанавливать, а можно тупо делегирование использовать вместо того, чтобы прям на чилда вешать обработчик.

Stojan · December 3, 2015

Добрые люди посоветовали lastChild заменить на lastElementChild, но эффект остался прежним.

Stojan · December 3, 2015

Ок. Спасибо! Попробую разобраться с делегированием.

А почему после того, как функция generateFaces() сработала при загрузке (создав 5 элементов img в левом div), не находится ни один child у элемента div?

Stojan · December 3, 2015

Решил задачу следующим образом:

<html>

<head>

<style>

#rightSide { left: 500px;

border-left: 2px solid black;

width:500px; height:500px;

position:absolute ;}

#leftSide {width:500px; height:500px;position:absolute;}

img{position:absolute;}

</style>

<title>Matching Game</title>

numberOfFaces =5;

var level=1;

function generateFaces() {

theLeftSide=document.getElementById("leftSide");

theRightSide =document.getElementById("rightSide");

theBody = document.getElementsByTagName("body")[0];

var i=1;

while(i<=numberOfFaces){

image=document.createElement("img");

image.src="smile.png";

image.style.top=Math.floor(Math.random()*401)+"px";

image.style.left=Math.floor(Math.random()*401)+"px";

theLeftSide.appendChild(image);

i++;

}

leftSideImages = theLeftSide.cloneNode(true);

leftSideImages.removeChild(leftSideImages.lastChild);

theRightSide.appendChild(leftSideImages);

theLeftSide.lastChild.onclick= function nextLevel(event){

event.stopPropagation();

level++;

numberOfFaces += 5;

//delete all childNodes

alert("Right! Proceeding to the "+level+" level!");

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

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

generateFaces();

}

theBody.onclick = function gameOver() {

alert("Game Over! You've reached only "+level+" level");

theBody.onclick = null;

theLeftSide.lastChild.onclick = null;

}

</script>

</head>

<h1>Matching Game</h1>

<p>Click on the extra smiling face on the left.</p>

</body>

</html>

Вставил функцию с событием onclick в функцию генерирования чайлдов.

Sign In

Не определяет элемент lastChild

Question

Stojan

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Igor Schnaider

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Stojan

Link to comment

Share on other sites

Stojan

Link to comment

Share on other sites

Stojan

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information