Mehrere Bilder können nicht erzeugt werden

Dies ist ein Spiel, in dem jedes Mal 5 weitere Bilder hinzugefügt werden, wenn ein Benutzer auf den letzten Knoten der linken Seite div klickt.Mehrere Bilder können nicht erzeugt werden

Wenn er auf einen anderen Knoten klickt, sollte "Game Over" angezeigt werden.

Probleme:

Typeerror: leftside.lastChild ist null
Wie würde ich alle Knoten beider div der rechten und linken Seite löschen, bevor die generateface Funktion aufrufen neuen Satz zu erzeugen, Gesichter.

Matching Game

klicken Sie auf den zusätzlichen lächelndes Gesicht auf der linken Seite
```
.smile {position:absolute} 
div {position:absolute; width:500px;height: 500px} 
#rightside {left:500px;border-left: 1px solid black} 
```
var numberOfFaces = 5; var leftside = document.getElementById ("linksseitig"); var rightside = document.getElementById ("rechts"); Funktion generatefaces() { for (i = 0; i event.stopPropagation(); numberOfFaces += 5; generateFaces(); }; theBody.onclick = function gameover() { theBody.onclick = null; alert ("Game Over!"); };

Quelle

2016-09-02 Anonymous

Haben Sie Fehler in Ihrer Konsole erhalten? –

Es könnte nur ein DOM mit mehreren Elementen geben! – Pugazh

@DavidR können Sie helfen! –

Sie haben vergessen px zum top und leftstyle Eigenschaft hinzufügen. Ändern Sie den Code wie unten

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>

Quelle

2016-09-02 11:21:07 z0mBi3

Danke, es hat funktioniert. Aber was ist die Logik des Hinzufügens von "px"? wenn ich einen Bereich festgelegt habe. –

Mehrere Bilder können nicht erzeugt werden

Matching Game

Antwort

Verwandte Themen