Stojan
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Stojan
-
-
Ок. Спасибо! Попробую разобраться с делегированием.
А почему после того, как функция generateFaces() сработала при загрузке (создав 5 элементов img в левом div), не находится ни один child у элемента div?
-
Добрые люди посоветовали lastChild заменить на lastElementChild, но эффект остался прежним.
-
Уважаемые форумчане!
Просьба помочь со скриптом.
Краткая информация о скрипте:
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>
Не определяет элемент lastChild
in JavaScript
Posted
Решил задачу следующим образом: