Skip to main content

How to Resolve "TypeError: Cannot read properties of null (reading 'focus')" Error in JavaScript

The TypeError: Cannot read properties of null (reading 'focus') is a common error in front-end JavaScript development. It occurs when you try to call the .focus() method on an element that your script failed to find in the DOM. In short, your code is trying to focus on an element that doesn't exist, and is working with a null value instead.

This guide will break down the two primary causes of this error: your script running before the DOM is ready, and an incorrect selector. You will learn the definitive solutions for each, including the best practices for script placement and how to write defensive code that gracefully handles missing elements.

Understanding the Root Cause: null Has No Methods​

The error message is very literal. The .focus() method is a function that belongs to HTML element objects. The value null in JavaScript represents the intentional absence of an object, and as such, it has no properties or methods. When your code tries to find an element with a method like document.getElementById() and fails, the method returns null.

Example of error:

// `input` will be `null` if no element with the ID 'my-input' exists in the DOM.
const input = document.getElementById('my-input');

// ⛔️ TypeError: Cannot read properties of null (reading 'focus')
input.focus();

The code fails because it's trying to call the .focus() method on null.

Cause 1 (Most Common): Script Executes Before the HTML is Parsed​

The most frequent cause of this error is placing your <script> tag in the <head> of your HTML document. The browser parses HTML from top to bottom. If your script runs before the browser has parsed the input element you're looking for, that element won't exist in the DOM yet, and your query for it will return null.

The Problematic Code:

<!DOCTYPE html>
<html>
  <head>
    <script src="app.js"></script> <!-- ❌ Runs before the input element is created -->
  </head>
  <body>
    <input type="text" id="my-input" />
  </body>
</html>

Solution A: Move the <script> Tag to the End of the <body>​

This is the simplest fix. By moving your <script> tag to just before the closing </body> tag, you guarantee that the entire HTML document has been parsed before your script begins to run.

<!DOCTYPE html>
<html>
  <body>
    <input type="text" id="my-input" />

    <!-- ✅ Good: The input element exists before this script runs -->
    <script src="app.js"></script>
  </body>
</html>

Solution B: Use the defer Attribute on the <script> Tag​

This is the modern and often recommended best practice. The defer attribute tells the browser to download the script but to execute it only after the document has been fully parsed. This allows you to keep your scripts in the <head>.

<!DOCTYPE html>
<html>
  <head>
    <!-- ✅ Best Practice: Script is downloaded early but runs late -->
    <script src="app.js" defer></script>
  </head>
  <body>
    <input type="text" id="my-input" />
  </body>
</html>

Solution C: Wrap Your Code in a DOMContentLoaded Event Listener​

This approach also allows your <script> to remain in the <head>. You wrap your DOM manipulation code in an event listener that waits for the DOMContentLoaded event, which fires when the initial HTML is ready.

// app.js
document.addEventListener('DOMContentLoaded', () => {
  // This code will only run after the entire DOM is ready
  const input = document.getElementById('my-input');
  
  if (input) {
    input.focus();
  }
});

Cause 2: The Selector is Incorrect or the Element Doesn't Exist​

If your script is loading at the correct time but you're still getting the error, the problem is a simple bad selector. You might have a typo in the ID, or the element truly isn't in your HTML.

Example of the code with problems:

<input type="text" id="first-name" />
// Typo in the ID: 'fist-name' instead of 'first-name'
const input = document.getElementById('fist-name'); // returns null

// ⛔️ TypeError: Cannot read properties of null (reading 'focus')
input.focus();

Solution: Check for null Before Calling .focus()​

A robust script should always be defensive. Before you try to interact with an element, you should first check that you actually found it.

Solution with an if statement​

const input = document.getElementById('fist-name');

if (input) {
  input.focus();
} else {
  console.error("Error: The input element was not found in the DOM.");
}

This prevents the TypeError and provides a clear, helpful error message in the console, making debugging much easier.

Solution with Optional Chaining (?.)​

This is a more modern and concise syntax for the same check.

const input = document.getElementById('fist-name');

// The focus() method is only called if `input` is not null or undefined
input?.focus();

Conclusion​

The Cannot read properties of null (reading 'focus') error is a clear indication that your JavaScript is running at the wrong time or is looking for the wrong element.

To fix it:

  1. Ensure your script runs after the DOM is ready. The best way to do this is by adding the defer attribute to your <script> tag in the <head>, or by moving your <script> tag to the end of the <body>.
  2. Verify your selectors. Double-check the ID, class name, or CSS selector to ensure it matches an element in your HTML.
  3. Write defensive code. Always check if an element is null before you try to call a method like .focus() on it, either with an if block or with the optional chaining (?.) operator.

Table of Contents