Cannot Read Property addEventListener of Null

In this article we disscuss about Cannot Read Property addEventListener of Null.

The method addEventListener() is used in conjunction with EventTarget, which is a Document Object Model (DOM) implementation that can receive events like click, mouseover, submit, keydown, drag, and more. Events can be thought of as the interaction a user has with the web page or document.

Unlike the value of undefined, the null value can be a value assigned on purpose by developers into their programs or projects. It represents the absence of any value or object. It is a primitive and falsy value.

Cannot Read Property addEventListener of Null

In this article, we’ll dive into why developers may receive this error when coding.

Why the Error addEventListener of Null is Triggered

We should be seeing the image upon clicking it, but instead, we receive the ‘Cannot read property ‘addEventListener’ of null’ error in the console.

Cannot Read Property addEventListener of Null

Misspelling the name of the class when invoking the querSelector() method could be the reason why. Remember that the value of null means the absence of a value or object. By calling on a value that doesn’t exist the error of null will appear.

Note that the querySelector method is just one of many methods. we can use when choosing to manipulate a CSS selector in the DOM. The difference between it and the Get Methods like .getElementsByClassName is that when calling a class or an id using querySelector or querySelectorAll, we need to remember to use the dot and hash symbol.

An example to be used inside the invocation (‘.insertClassName’) when calling the name of the class or (‘#insertIdName’) when calling the name of the id. Forgetting to do so will result in the same error.

HTML

<section class="content-destination">
      <h2>Pick Your Destination</h2>
      <p>Expedition excursion design darn excursion fun, clean simple organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>
      <img src="img/destination.jpg" alt="Second slide">
    </section>

JavaScript

 const thirdBorder = document.querySelector('.content-dest');
 thirdBorder.addEventListener('click', (event) => {
     event.target.style.border = '1rem dotted blue'
     event.stopPropagation();    
});

Notice when we invoke the querySelector method. we are calling on the class ‘.content-dest’ when ‘.content-dest’ does not exist in the HTML. If we would have forgotten to use the dot in the class name. we will receive the same error as well.

addEventListener of Null Debugging

The value we should be selecting in our JavaScript is ‘.content-destination’. Upon correcting this, the error in the console disappears. we see the blue dotted border created in our event listener.

 const thirdBorder = document.querySelector('.content-destination');
 thirdBorder.addEventListener('click', (event) => {
     event.target.style.border = '1rem dotted blue'
     event.stopPropagation();    
});
Cannot Read Property addEventListener of Null

The addEventListener method is used the way for users to interact with the web page or document. Null is the absence of a value or object. When we call on a selector that doesn’t exist or forget to include the dot in the class name or hash symbol in id when invoking the querySelector methods.

Also Check out how to show and hide Table Column Using HTML CSS JavaScript

If you interested in Entertainment genre please check this also thebiographys.com

Related Posts

One thought on “Cannot Read Property addEventListener of Null

Leave a Reply

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