Stojan
-
Posts
4 -
Joined
-
Last visited
Stojan's Achievements
Explorer (1/14)
0
Reputation
-
Решил задачу следующим образом: <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;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 childNodesalert("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><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> Вставил функцию с событием onclick в функцию генерирования чайлдов.
-
Ок. Спасибо! Попробую разобраться с делегированием. А почему после того, как функция 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>