2016-05-28 3 views
1

Я делаю небольшую игру, используя Javascript, в которой есть две стороны. В левой части есть 5 фотографий и справа сторона есть 4 pics.When пользователь нажимает на отсутствующую картинке слева, то игра переходит к следующему level.I не написал полный код yet.I написал следующий кодНе удалось выполнить 'removeChild' в 'Node': параметр 1 не относится к типу 'Node'

<!--smile game--> 
<!DOCTYPE html> 
<html> 
    <head> 
     <title>Matching Game part3</title> 
     <meta charset = "UTF-8"> 
     <style> 
      img 
      { 
       position: absolute; 
      } 
      div 
      { 
       position: absolute; 
       width: 500px; 
       height: 500px; 
      } 
      #rightside 
      { 
       left: 500px; 
       border-left: 1px solid black; 
      } 

     </style> 

    </head> 
    <body id ="theBody" 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> 

     <script> 
      var numberOfFaces = 5; 
      var theLeftSide = document.getElementById("leftside"); 
      var theRightSide = document.getElementById("rightside"); 
      function generateFaces() 
      { 
       for(var i =0; i<numberOfFaces; i++) 
       { 
        var image = document.createElement("img"); 
        image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
        image.style.top = Math.floor(Math.random() * 400) + "px"; 
        image.style.left = Math.floor(Math.random() * 400) + "px"; 
        document.getElementById("leftside").appendChild(image); 
       } 
      } 

      leftsideimages = theLeftSide.cloneNode(true); 
      leftsideimages.removeChild(leftsideimages.lastChild); 
      theRightSide.appendChild(leftsideimages); 

     </script> 
    </body> 
</html> 

И я получаю сообщение об ошибке

Не удалось выполнить 'removeChild' в 'Node': параметр 1 не имеет тип 'Node'.

Я прошел через две другие посты здесь на переполнение стека, но не могу понять, как исправить мою error.In код я первый clong все изображения, а затем удаление последнего ребенка, а затем добавить все изображения на с правой стороны, так что это может быть на 1 меньше. Поэтому, если кто-то может помочь. Спасибо заранее.

ответ

1

Ваш сценарий является встраиваемой в организме, поэтому оно будет работать, пока тело создается - и все, что делается с помощью функции generateFaces() определенно не будет доступен по коду после него (метод создается, когда скрипт запускается во время загрузки тела, но на самом деле не вызывается, пока после того, как тело загрузилась)

Я никогда переставить свой код несколько:

<!--smile game--> 
<!DOCTYPE html> 
<html> 
<head> 
<title>Matching Game part3</title> 
<meta charset = "UTF-8"> 
<style> 
    img 
    { 
     position: absolute; 
    } 
    div 
    { 
     position: absolute; 
     width: 500px; 
     height: 500px; 
    } 
    #rightside 
    { 
     left: 500px; 
     border-left: 1px solid black; 
    } 
</style> 
<script> 
var numberOfFaces = 5; 
function generateFaces() 
{ 
    for(var i =0; i<numberOfFaces; i++) 
    { 
     var image = document.createElement("img"); 
     image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
     image.style.top = Math.floor(Math.random() * 400) + "px"; 
     image.style.left = Math.floor(Math.random() * 400) + "px"; 
     document.getElementById("leftside").appendChild(image); 
    } 
} 

function init() { 
    var theLeftSide = document.getElementById("leftside"); 
    var theRightSide = document.getElementById("rightside"); 
    generateFaces(); 
    leftsideimages = theLeftSide.cloneNode(true); 
    leftsideimages.removeChild(leftsideimages.lastChild); 
    theRightSide.appendChild(leftsideimages); 
} 
</script> 
</head> 
<body id ="theBody" onload="init()"> 
    <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> 
+0

Спасибо очень much..It сейчас работает .. :) – john400

0

Вы еще не позвонили generateFaces(). Таким образом, theLeftSide не содержит детей, когда он клонирован, делая leftsideimages.lastChild()null.

Не волнуйтесь, мы все были там раньше!

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