Uncaught TypeError: Cannot set property X of null

Question

I keep receiving this error for my mobile navigation:

Uncaught TypeError: Cannot set property 'onclick' of null

I cannot find the cause. The error is referring to the last 3/4 lines of code.

var theToggle = document.getElementById('toggle');

function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}

function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}

function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}

function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, " " ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0 ) {
            newClass = newClass.replace( " " + className + " " , " " );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}

theToggle.onclick = function() {
   toggleClass(this, 'on');
   return false;
}

An element with the id of 'toggle' can not be found on your page by your code. — andreini, Aug 05 '16 at 07:40

score 2 · Accepted Answer · answered Aug 05 '16 at 07:42

2

Looks like Your .js loaded before DOM was initialized, and document.getElementById('toggle') found nothing, as there is no element with this id yet.

Place this <script> in the end of HTML.

answered Aug 05 '16 at 07:42

Razzka

641
5
16

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

your DOM is not yet ready when the code has been executed.
or the DOM with id="toggle" does not exists.

if the error scenario is number 1, you can fix it by wrapping you codes in a self invoking function

$(document).ready(function(){ ... }); or (function(){ ... })();

what are the difference between two?

edited May 23 '17 at 10:28

Community

1
1

answered Aug 05 '16 at 07:47

Jairo Malanay

1,327
9
13

Here's a demo using $(document).ready(... : http://codepen.io/virmasalo/pen/EydbVw – Shamppi Aug 05 '16 at 07:49

score 0 · Answer 3 · answered Aug 05 '16 at 07:41

0

theToggle.addEventListener("click", function(){
   toggleClass(this, 'on');
   return false;
});

answered Aug 05 '16 at 07:41

Vicheanak

6,444
17
64
98

1

This might be the solution, but please provide information on WHY this is the answer, so people can actually learn. – Randy Aug 05 '16 at 08:48

Uncaught TypeError: Cannot set property X of null

3 Answers3