Adding class on load with javascript not working

Question

I am trying to add a class on page load using javascript. I'm currently learning javascript so bear with me. I am just trying to change the background color of an element as a test shown below. I get the error "Uncaught TypeError: Cannot read property 'classList' of null"

I know I am more than likely missing a very simple step here so would appreciate any advice.

Thanks all

window.onload = onPageLoad();

function onPageLoad() {
    document.querySelector('.home').classList.add = ('active');
}

.bg-yellow {
  background-color: yellow;
}

.active {
  background-color: green;
}

div {
  height: 400px;
  width: 400px;
}

<div class="bg-yellow"></div>

Asons · Accepted Answer · 2018-04-16 15:35:50Z

3

First, remove () from window.onload = onPageLoad(); when assign, or else it will invoke it immediately.

Second, it should be .classList.add('active');, not .classList.add = ('active');.

Third, your element's class selector is .bg-yellow, not .home.

Stack snippet

window.onload = onPageLoad;

function onPageLoad() {
    document.querySelector('.bg-yellow').classList.add('active');
}

.bg-yellow {
  background-color: yellow;
}

.active {
  background-color: green;
}

div {
  height: 400px;
  width: 400px;
}

<div class="bg-yellow"></div>

edited Apr 16, 2018 at 15:35

answered Apr 16, 2018 at 15:31

Asons

87.7k12 gold badges119 silver badges175 bronze badges

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

1 Comment

rufus Over a year ago

thanks so much! I knew it would be something simple. Thanks so much again

Code_Frank · Accepted Answer · 2018-04-16 15:42:38Z

1

Remove the = sign. As I recall, .add () is a function. Also search .bg-yellow, not .home in the querySelector function, assuming that is what you want to add the class to given your code samples. Or add 'home' to the classes of the .bg-yellow div e.g.

<div class='bg-yellow home'><div>.

The error you are receiving is because .home does not exist in your page according to the sample you gave. Therefore the .querySelector will return null (see the standard) when searching for that selector, and there is no classList defined for null objects.

edited Apr 16, 2018 at 15:42

answered Apr 16, 2018 at 15:29

Code_Frank

3811 silver badge6 bronze badges

Collectives™ on Stack Overflow

Adding class on load with javascript not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related