To solve the "Cannot read property 'querySelector' of null" error, make sure you're using the correct `id` when getting the DOM element. The error often occurs after providing an invalid `id` to the `getElementById` method.

Solve - Cannot read property 'querySelector' of Null in JS

## Solve - Cannot read property 'querySelector' of Null

**The "Cannot read property 'querySelector' of null" error occurs for 2
reasons:**

1. Calling the `querySelector()` method on a `null` value (DOM element that
   doesn't exist).
2. Inserting the JS script tag above the HTML where the DOM elements are
   declared.

```javascript:index.js
const element = null;

// ❌ Cannot read properties of null (reading 'querySelector')
const box = element.querySelector('#box');
```

**To solve the "Cannot read property 'querySelector' of null" error, make sure
you're using the correct `id` when getting the DOM element. The error often
occurs after providing an invalid `id` to the `getElementById` method.**

```javascript:index.js
const element = document.getElementById('does-not-exist');
console.log(element); // 👉️ null

// ❌ Cannot read properties of null (reading 'querySelector')
const box = element.querySelector('#box');
```

We provided a non-existent `id` to the `getElementById` method, so we got a
`null` value back. Calling the `querySelector()` method on a `null` value causes
the error.

**To solve the "Cannot read property 'querySelector' of null" error, place the
JS script tag at the bottom of the body tag. The JS script should run after the
DOM elements are created.**

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    
    <script src="index.js"></script>

    <div id="container">
      <div id="box">Text</div>
    </div>
  </body>
</html>
```

The JS script tag is placed above the DOM elements it tries to access, therefore
the `div` element will not be accessible inside the `index.js` file.

```javascript:index.js
const element = document.getElementById('container');
console.log(element); // 👉️ null

// ❌ Cannot read properties of null (reading 'querySelector')
const box = element.querySelector('#box');
```

Instead, place the JS script tag at the bottom of the body, after the DOM
elements it tries to access.

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="container">
      <div id="box">Text</div>
    </div>

    
    <script src="index.js"></script>
  </body>
</html>
```

Now we can access the `div` element inside of the `index.js` file.

```javascript:index.js
const element = document.getElementById('container');
console.log(element); // 👉️ div#container

// ✅ Works
const box = element.querySelector('#box');
console.log(box); // 👉️ div#box
```

## Conclusion

The "Cannot read property 'querySelector' of null" error occurs when trying to
call the `querySelector()` method on a `null` value.

To solve the error, run the JS script after the DOM elements are available and
make sure you only call the method on valid DOM elements.

<InArticleAd />

Solve - Cannot read property 'querySelector' of Null in JS

Solve - Cannot read property 'querySelector' of Null #

Conclusion #

Borislav Hadzhiev

For more articles, navigate to myHome Page

Solve - Cannot read property 'querySelector' of Null in JS