document.getElementById returns null for unknown reason

Question

The code is for a slider to switch images. When I run the page I get this error:

Cannot set property 'onclick' of null.

HTML:

   <!DOCTYPE html>
   <html lang="en">
   <head>
<meta charset="UTF-8">
<title>Image Slider</title>
<link rel="stylesheet" type="text/css" href="sliderswag.css">
<script language="javascript" type="text/javascript" src="imgslidescript.js"></script>
</head>
<body>
<div id="box">
    <img id="main" src="http://lmetar.com/oscar1.jpg">
    <img id="left" src="http://lmetar.com/left.png">
    <img id="right" src="http://lmetar.com/right.png">
</div>

JavaScript:

 document.getElementById('left').onclick = slideChange;
document.getElementById('right').onclick = slideChange;
var slideNumber = 0;
function slideChange()
{
    slideNumber += 1;
    if (slideNumber > 3)
    {
        slideNumber = 1;
    }
    else
    {
        document.getElementById('main').src = 'http://lmetar.com/oscar' + slideNumber + '.jpg';
    }
}

That probably means that your JS is being executed before the DOM loads. Either wrap the code in a DOM loaded callback, or move the position of the ` — Josh Crozier, Dec 01 '15 at 20:40

score 6 · Answer 1 · answered Dec 01 '15 at 20:40

Move your script to the end of your page. You're running JavaScript on elements that don't yet exist.

Or wrap the code you have in a window.onload call which will execute the code after the window has loaded. Ex:

 window.onload = function () {
   document.getElementById('left').onclick = slideChange;
   document.getElementById('right').onclick = slideChange;
   var slideNumber = 0;

   function slideChange() {
     slideNumber += 1;
     if (slideNumber > 3) {
       slideNumber = 1;
     } else {
       document.getElementById('main').src = 'http://lmetar.com/oscar' + slideNumber + '.jpg';
     }
   }
 };

Consider adding an event listener attached to the document instead of a `window.onload`. See Druzion's answer. — Nick Zuber, Dec 01 '15 at 20:48

score 0 · Answer 2 · answered Dec 01 '15 at 20:44

Your JavaScript is loading before you content, therefore it is trying to find elements that do not exists. You have 2 options:

Move your <script> tag to the end of your page
Use the following to wait until the page has loaded before you execute your script

Code:

document.addEventListener("DOMContentLoaded", function(event) { 
  // Your Code Here
});

document.getElementById returns null for unknown reason

2 Answers2