Null Referenzfehler in Dokument.Element

Ich habe einen Fehler bei append Kind als Objekt Nullwert Fehler ist dort Infact habe ich das Objekt im oberen Teil des Skripts mit Dokument get Element erstellt und ich versuche, das Problem zu lösen wie links ist da in der div brauchen einige hilfe versuchen, es herauszufinden. Bitte als u lesenNull Referenzfehler in Dokument.Element

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Game</title> 
<style> 

imgg{ 
    position: absolute; 

} 

div{ 
    width: 500px; 
    height: 500px; 
    position: absolute; 
} 

#rightSide { left: 500px; 
    border-left: 1px solid black } 

</style> 
<script> 

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

    function generateFaces(){ 

     for(var i = 1 ; i <= numberOfFaces ; i++) 
     { 
      var imgg = document.createElement("img"); 
      imgg.src = "smile.png"; 
      imgg.style.height = "100px"; 
      imgg.style.width = "100px"; 
      imgg.style.top = Math.random() *400 ; 
      imgg.style.left = Math.random() *400 ; 
      theLeftSide.appendChild(imgg); 
     } 
    } 

</script> 

</head> 
<body onload="generateFaces()"> 
<h2>Matching Game</h2> 
<p>Click on the extra smiling face on the left.</p> 

<div id="leftSide"></div> 
<div id="rightSide"></div> 


</body> 
</html>

Quelle

2016-06-18 Muzammil Bilwani

Legen Sie das ''

Platzieren Sie Ihre <script> als last-child von <body> wie sie in der Zeit, die Sie das Element zugreifen DOM-api Verwendung Element ist nicht in der DOM
Set position zu absolute
Add-Einheit als px(pixel) beim Zuweisen top und left

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

 
function generateFaces() { 
 

 
    for (var i = 1; i <= numberOfFaces; i++) { 
 
    var imgg = document.createElement("img"); 
 
    imgg.src = "http://i185.photobucket.com/albums/x304/metalife/transmetropolitan-smile.png"; 
 
    imgg.style.height = "100px"; 
 
    imgg.style.width = "100px"; 
 
    imgg.style.position = 'absolute'; 
 
    imgg.style.top = Math.random() * 400 + 'px'; 
 
    imgg.style.left = Math.random() * 400 + 'px'; 
 
    theLeftSide.appendChild(imgg); 
 
    } 
 
}

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

<body onload="generateFaces()"> 
 
    <h2>Matching Game</h2> 
 
    <p>Click on the extra smiling face on the left.</p> 
 

 
    <div id="leftSide"></div> 
 
    <div id="rightSide"></div>

Quelle

2016-06-18 05:36:14 Rayon

Verwandte Themen