Uncaught Typeerror: Cannot Read Property 'addeventlistener' of Undefined

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

Unlike the value of undefined, the cipher value can be a value assigned on purpose past developers  into their programs. It represents the absenteeism of any value or object. It is a primitive and falsy value.

In this article, nosotros'll dive into why developers may receive this mistake when coding.

Why the Error of Nil is Triggered

An event listener was added to the image of the ship on the website beneath. We should be seeing a bluish dotted border around the image upon clicking information technology, but instead we receive the 'Cannot read property 'addEventListener' of zilch' error in the console.

Misspelling the name of the class when invoking the querSelector() method could be the reason why. Recall that the value of zero means the absenteeism of a value or object. By calling on a value that doesn't be the mistake of null will appear.

Note that the querySelector method is only one of many methods we can employ when choosing to dispense 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, nosotros need to call up to use the dot and hash symbol.

An instance to be used inside the invocation is ('.insertClassName') when calling the name of the class or ('#insertIdName') when calling the proper noun of the id. Forgetting to exercise so volition result in the aforementioned error.

The image of the instance website above is a representation of the post-obit markup and JavaScript code.

81% of participants stated they felt more than confident nigh their tech task prospects subsequently attention a bootcamp. Get matched to a bootcamp today.

The average bootcamp grad spent less than half dozen months in career transition, from starting a bootcamp to finding their offset job.

HTML

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

JavaScript

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

Discover when nosotros invoke the querySelector method, nosotros 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 would have received the same error also.

Debugging

The value nosotros should be selecting in our JavaScript is '.content-destination'. Upon correcting this, the error in the console disappears, and we run into the bluish dotted border created in our event listener.

            const thirdBorder = document.querySelector('.content-destination');  thirdBorder.addEventListener('click', (event) => {      event.target.mode.border = '1rem dotted bluish'      effect.stopPropagation();     });          

Determination

The addEventListener method is used as a way for users to interact with the web page or document. Zilch is the absence of a value or object. When we call on a selector that does not be, or forget to include the dot in grade proper noun or hash symbol in id when invoking the querySelector methods, we can trigger the same mistake of goose egg.

thomasforeadfat67.blogspot.com

Source: https://careerkarma.com/blog/cannot-read-property-addeventlistener-of-null/

Bagikan Artikel ini