Warning: session_start(): open(/tmp/sess_0a7169b06a3a4283f0facfb8622675f8, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
TypeError: Cannot read property 'classList' of Null in JavaScript - LearnShareIT

TypeError: Cannot read property ‘classList’ of Null in JavaScript

TypeError: Cannot read property ‘classList’ of Null in JS

TypeError: Cannot read property ‘classList’ of Null in JavaScript is an error frequently happens to all programmers. Please refer to the document below to avoid making this mistake again.

Why does the error “TypeError: Cannot read property ‘classList’ of Null” in JS happen?

I have carefully observed and studied the error “TypeError: Cannot read property ‘classList’ of Null” in Javascript. It is an error that happens quite often to me. To describe it intuitively, you should look at the following example.

In index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="LearnShareIT">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id = "learn">Learn Share IT</title>
</head>
<body>

  <script src="main.js"></script>

</body>
</html>

In main.js file:

const text = document.createTextNode("LearnShareIT");
const add = document.getElementById("lear");
add.appendChild(text);

console.log(text);

First I create an element <title > with id="learn". Then in the main.js file, I wanted to call an element with that id, but I mistyped the id name. So my return value is null. If I stop here, the error won’t happen, but I used it to add the text "LearnShareIT". The null value could not add this text, giving an error.

Output

main.js:132 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at main.js:132:5

To fix this error, please refer to some ways below.

How to fix this error?

Get the correct element

Make sure you get the element you want to get. If you can’t get the element, the result will return null, and when you manipulate that data, it will throw an error like this:

const text = document.getElementById("lear");

console.log(text);

Output

null

Please check the id name correctly:

const text = document.getElementById("learn");

console.log(text);

Output

<title id="learn">Title</title>

You can use this element to change the text content, and it will not raise an error:

const text = document.createTextNode("LearnShareIT");
const add = document.getElementById("learn");
add.appendChild(text);

console.log(text);

Output

LearnShareIT

The content of Title has been changed to LearnShareIT.

Put the main.js file in the correct location

Misplacing your js file can also affect the results. If the file is misplaced, it will not run and the return result will be null. It will repeat the above error if it is used to manipulate methods inside Javascript.

Make sure your file is located in the body tag as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="LearnShareIT">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id = "learn">Learn Share IT</title>
</head>
<body>

  <script src="main.js"></script>

</body>
</html>

Output

LearnShareIT

Summary

To avoid the error “TypeError: Cannot read property ‘classList’ of Null” in JS, make sure that the value you get is not null. The article showed two ways to handle it, let’s follow to solve your project.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *