Невозможно сгенерировать несколько изображений

Это игра, в которой нужно добавить еще 5 изображений каждый раз, когда пользователь нажимает на последний узел левой части div.Невозможно сгенерировать несколько изображений

Если он нажимает на какой-либо другой узел, на дисплее появляется надпись «game over».

Вопросы:

TypeError: leftside.lastChild является нулевой
Как бы удалить все узлы правой и левой стороне DIV перед вызовом функции generateface для создания нового набора лица.

комбинационной игры

нажмите на дополнительной улыбающееся лицо на левой
```
.smile {position:absolute} 
div {position:absolute; width:500px;height: 500px} 
#rightside {left:500px;border-left: 1px solid black} 
```
вар numberOfFaces = 5; var leftside = document.getElementById ("левая сторона"); var rightside = document.getElementById ("rightside"); функция generatefaces() { для (я = 0; я event.stopPropagation(); numberOfFaces += 5; generateFaces(); }; theBody.onclick = функция GameOver() { theBody.onclick = NULL; предупреждение ("Game Over!"); };

источник

2016-09-02 Anonymous

ли вы какие-либо ошибки в консоли? –

Может быть только один DOM с несколькими элементами! – Pugazh

@ DavidR вы можете помочь! –

Вы забыли добавить px свойству top и leftstyle. Измените код, как показано ниже

ismile.style.top = topran + 'px'; 
ismile.style.left = leftran + 'px';

var numberOfFaces = 5; 
 

 
var leftside = document.getElementById("leftside"); 
 

 
function generatefaces() { 
 

 
for (i=0;i<=numberOfFaces;i++) { 
 

 
ismile = document.createElement("img"); 
 

 
ismile.src = "http://orig00.deviantart.net/449c/f/2009/061/5/7/smiley_icon_by_emopunk23.jpg"; 
 

 
ismile.className = "smile"; 
 

 
var topran = Math.random() * 400; 
 

 
topran = Math.floor(topran); 
 

 
var leftran = Math.random() *400; 
 

 
leftran = Math.floor(leftran); 
 

 
ismile.style.top = topran + 'px'; 
 

 
ismile.style.left = leftran + 'px'; 
 

 
leftside.appendChild(ismile); 
 

 
} 
 

 
}

.smile {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-09-02 11:21:07 z0mBi3

Спасибо, сработало. Но какова логика добавления «px»? , когда я установил диапазон. –

Невозможно сгенерировать несколько изображений

комбинационной игры

ответ

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