Null reference error in document.element

Question

I am facing error at append child as the object null value error is there infact i have created the object in the top of script with document get element and i am trying to get the issue resolve as left side is in there in the div need some help try to figure it out. Please as u read

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

You've referenced `document.getElementById("leftSide");` before the actual `
` at body. — FrozenFire, Jun 18 '16 at 05:35

Rayon · Answer 1 · 2016-06-18T05:55:27.630

Place your <script> as last-child of <body> as by the time you are accessing the element using DOM-api, element is not in the DOM
Set position to absolute
Add unit as px(pixel) while assigning top and 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>

score 0 · Accepted Answer · answered Jun 18 '16 at 05:38

document.getElementById("leftSide"); will give error if you put your script inside head. The reason being when js will try to parse this line but there is no such DOM present .

You can resolve it by using

window.onload

put the script tag before closing body tag

<body>
    // Dom
<script>
      // Rest of code
</script>
</body>

Using window.onload

<head>
  //Rest of code

<script>
   window.onload = function(){
   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>

Check this JSFIDDLE , script is wrapped in the body

Null reference error in document.element

2 Answers2