Соответствие игры. Javascript. DOM lastChild

-1

Существует простая игра. Левая и правая стороны идентичны, за исключением одного: левая сторона имеет одно дополнительное лицо. Пользователь должен узнать и нажать на это дополнительное лицо (lastChild). Это заставит функцию удвоить количество лиц.Соответствие игры. Javascript. DOM lastChild

Проблема в том, что все лица в моей игре - lastChild. В чем проблема?

Спасибо!

<!DOCTYPE <!DOCTYPE html> 

<html> 

<head> 
    <title>Matching Game. Part 3.</title> 
    <style> 
    img { 
     position: absolute; 
    } 
    div { 
     position: absolute; 
     width: 500px; 
     height: 500px; 
    } 
    #rightSide { 
     left: 500px; 
     border-left: 1px solid black; 
    } 

    </style> 

    <script> 

function generateFaces(){ 

    var numberOfFaces = 5; 
    //var theLeftSide = document.getElementById("leftSide"); 

    for(var i=0; i < numberOfFaces; i++) { 
     var smileImage = document.createElement("img"); 
     smileImage.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 

     var topPosition = Math.floor(Math.random()* 400) + 1; 
     var leftPosition = Math.floor(Math.random()* 400) + 1; 

     smileImage.style.top = topPosition + "px"; 
     smileImage.style.left = leftPosition + "px"; 
     leftSide.appendChild(smileImage); 

    var leftSideImages = leftSide.cloneNode(true); 
    leftSideImages.removeChild(leftSideImages.lastChild); 
    rightSide.appendChild(leftSideImages); 

    leftSide.lastChild.style.background = "red"; 

    var theBody = document.getElementsByTagName("body")[0]; 
    leftSide.lastChild.onclick = function nextLevel(event) { 

    event.stopPropagation(); 

    numberOfFaces += 5; 
    generateFaces(); 
    }   
    } 
} 


</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>

источник

2016-01-03 21igor

'переменная leftSide' не определена в сценарии. –

Вы связываете событие click с каждым элементом цикла. Сначала вам нужно перегрузить предыдущий обработчик, а затем снова привязать его к последнему элементу.

function generateFaces(){ 
 

 
    var numberOfFaces = 5; 
 
    var leftSide = document.getElementById("leftSide"); 
 
var rightSide = document.getElementById("rightSide"); 
 
    for(var i=0; i < numberOfFaces; i++) { 
 
     var smileImage = document.createElement("img"); 
 
     smileImage.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
 

 
     var topPosition = Math.floor(Math.random()* 400) + 1; 
 
     var leftPosition = Math.floor(Math.random()* 400) + 1; 
 

 
     smileImage.style.top = topPosition + "px"; 
 
     smileImage.style.left = leftPosition + "px"; 
 
     leftSide.appendChild(smileImage); 
 

 
    var leftSideImages = leftSide.cloneNode(true); 
 
    leftSideImages.removeChild(leftSideImages.lastChild); 
 
    rightSide.appendChild(leftSideImages); 
 

 
    leftSide.lastChild.style.background = "red"; 
 

 
    var theBody = document.getElementsByTagName("body")[0];   
 
    } 
 
    var pics = document.getElementsByTagName("img"); 
 
    for(i=0;i<pics.length;i++){ 
 
    \t pics[i].onclick = function() { 
 
     \t \t return false; 
 
    \t \t } 
 
    } 
 
    leftSide.lastChild.onclick = function nextLevel(event) { 
 
    event.stopPropagation(); 
 
    numberOfFaces += 5; 
 
    generateFaces(); 
 
    } 
 
}

img { 
 
     position: absolute; 
 
    } 
 
    div { 
 
     position: absolute; 
 
     width: 500px; 
 
     height: 500px; 
 
    } 
 
    #rightSide { 
 
     left: 500px; 
 
     border-left: 1px solid black; 
 
    }

<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>

источник

2016-01-03 10:12:05 kurt

Соответствие игры. Javascript. DOM lastChild

ответ

Смежные вопросы