Cannot read property 'className' of null

Question

This isn't working. I have an element in my html with the id "color". What is the deal? I just want it to add to the class of that element.

var el = document.getElementById("color");
var number = Math.floor((Math.random() * 5) + 1);

switch (number) {
    case 1:
        el.className += " blue";
        break;

    case 2:
        el.className += " yellow";
        break;

    case 3:
        el.className += " red";
        break;

    case 4:
        el.className += " green";
        break;

    case 5:
        el.className += " purple";
        break;
}

Is the script executed before the document has loaded?

Ja͢ck
– Ja͢ck

2014-11-16 10:09:07 +00:00
Commented Nov 16, 2014 at 10:09 — Ja͢ck
– Ja͢ck, Commented Nov 16, 2014 at 10:09
Are you running this before the DOM is loaded?

Scimonster
– Scimonster

2014-11-16 10:09:12 +00:00
Commented Nov 16, 2014 at 10:09 — Scimonster
– Scimonster, Commented Nov 16, 2014 at 10:09

a-d · Accepted Answer · 2014-11-16 10:17:46Z

9

I'd say this comes from the fact the body is not loaded when you try to get the #color element.

Just wrap the thing inside this

window.onload = function () {
    // your code
};

Or you can load your code at the end of the body

<body>
    <!-- you content -->
    <script src="your-script.js"></script>
</body>

And finally you can listen for the DOMContentLoaded event. It's a little faster than window.onload but has slightly less support, IE9+.

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code
});

edited Nov 16, 2014 at 10:17

answered Nov 16, 2014 at 10:10

a-d

10.9k2 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

a-d Over a year ago

@Jonathan Good suggestion, though I could have updated my answer had you commented :p

Ja͢ck Over a year ago

On a page with a lot of images, hooking into DOMContentLoaded event is actually a lot faster than onLoad.

argentum47 Over a year ago

Or by convention include your js at the end, before </body>

a-d Over a year ago

@argentum47 This is what is already stated in my answer, actually

argentum47 Over a year ago

my mistake. didn't see that.

rbazzle · Accepted Answer · 2014-11-17 08:50:46Z

0

I declared a variable "el" that wasn't within the scope of the switch.

answered Nov 17, 2014 at 8:50

rbazzle

331 gold badge1 silver badge4 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'className' of null

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related