JavaScript DOM Manipulation — Spot the Bug!

Why This Question Matters

If you've spent any time in the browser console, you've probably run into a TypeError: Cannot read properties of null (reading 'classList'). It’s practically a rite of passage for junior JavaScript developers.

The snippet we're looking at seems foolproof. You grab an element, you add a class. Simple, right? But in the real world, DOM manipulation isn't just about the syntax—it's about timing and existence. The "bug" in these types of challenges usually isn't a typo in the method name; it's a failure to account for the fact that the DOM might not be ready, or the element might not even exist on the page.

Understanding why this fails is the difference between writing code that "works on my machine" and writing production-ready code that doesn't crash when a user hits a specific route.

Understanding the Code

Let's look at the two lines we have:

const btn = document.querySelector(".my-button")
btn.classList.add("active")

Line one uses document.querySelector. This is the Swiss Army knife of DOM selection. It looks for the first element in the document that matches the CSS selector .my-button.

Line two assumes that btn actually contains an element. It accesses the classList property (which is a DOMTokenList) and calls the add() method to inject the "active" class into the HTML.

Internally, if querySelector finds a match, it returns an Element object. If it doesn't find anything, it returns null.

Here is the catch: null does not have a classList property. When the engine hits line two and finds that btn is null, it throws an error and stops execution of your script entirely.

Finding the Correct Answer

In this challenge, the correct answer is Option B, which likely points to the fact that the element might be null or the script is running before the HTML has finished loading.

Why not the other options?
Some might guess that .classList.add() is the wrong method or that you need to use setAttribute. While you *could* use setAttribute('class', 'active'), that's a terrible idea because it overwrites every other class the button already has. classList.add is the industry standard for a reason.

The real issue is the lack of a safety check. To make this code robust, you need to ensure the element exists before you try to touch its properties.

The "pro" way to write this would be using optional chaining:

btn?.classList.add("active");

if (btn) {

  btn.classList.add("active");

}

Common Mistakes Developers Make

The most common mistake I see is placing the