Troubleshooting issues with applying a class on load using JavaScript

Question

Troubleshooting issues with applying a class on load using JavaScript

I am new to Javascript and I am trying to add a class to an element when the page loads. Specifically, I want to change the background color of the element as a test. However, I keep running into the error message "Uncaught TypeError: Cannot read property 'classList' of null."

I know that I must be missing something simple here. Any advice would be greatly appreciated.

Thank you in advance

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>

javascript html css

Answer 1

Answer №1

To start, it's important to remove the parentheses from window.onload = onPageLoad(); when assigning it, otherwise it will be invoked immediately.

Secondly, the correct syntax is .classList.add('active');, not .classList.add = ('active');.

Lastly, make sure you are using the class selector .bg-yellow for your element, not .home.

Check out the stack snippet below:

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>

Answer 2

To start, it's important to remove the parentheses from window.onload = onPageLoad(); when assigning it, otherwise it will be invoked immediately.

Secondly, the correct syntax is .classList.add('active');, not .classList.add = ('active');.

Lastly, make sure you are using the class selector .bg-yellow for your element, not .home.

Check out the stack snippet below:

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>

Answer 3

Answer №2

To correct the issue, remove the equals sign. From what I remember, .add() is a function that should be utilized. It might be worth looking for .bg-yellow instead of .home in the querySelector function based on your code examples. Alternatively, you could add 'home' to the classes of the .bg-yellow div like this:

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

.

The reason for the error message you are encountering is likely due to the fact that .home does not exist on your page as indicated by the sample provided. Therefore, when searching for that selector, .querySelector will return null (refer to the standard) and there will be no classList defined for null objects.

Answer 4

To correct the issue, remove the equals sign. From what I remember, .add() is a function that should be utilized. It might be worth looking for .bg-yellow instead of .home in the querySelector function based on your code examples. Alternatively, you could add 'home' to the classes of the .bg-yellow div like this:

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

.

The reason for the error message you are encountering is likely due to the fact that .home does not exist on your page as indicated by the sample provided. Therefore, when searching for that selector, .querySelector will return null (refer to the standard) and there will be no classList defined for null objects.

Troubleshooting issues with applying a class on load using JavaScript

Answer №1

Answer №2

Similar questions

Passing a service into a directive results in an undefined value

When using the android phonegap application, the screen interface may not render properly and display a patch on the keypad area when the keypad is

Building a Directory with Cordova Application

Creating a popup window for multiple file uploads in ASP.NET using VB.NET

React Routes displays single route at a time

Looking to retrieve a JavaScript code block from an AJAX response using jQuery?

What is the best way to create a CSS flexbox row that does not span the full width of the screen?

Nextjs is having trouble loading the Infogram script

Tips for accessing the firebase user's getIdToken method in Next.js after a page reload

Using jQuery to merge various .HTML elements and set their attributes

Guide to setting a default child route in react-router and updating the URL as needed

Button in Angular requiring double-click to trigger the click event

Overlaying content: Innovative dropdown menu design

Are you looking to convert this JSON using underscore or any other JavaScript utility tool?

Having trouble storing radio buttons and checkboxes in MySQL database using AJAX

Does anyone have any firsthand experience with Internet Explorer performing poorly on a VPS?

Generating dynamic div elements in a Laravel blade template using a foreach loop

The text rests on a slanted div with a captivating background image

Issue with line wrapping due to padding-left in IE7

Understanding sessionToken functionality and enabling multiple device logins for a single user simultaneously in Parse