Tumblr Redirect Cannot Read Property 'appendchild' 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 spider web page or document.

Unlike the value of undefined, the zip value tin be a value assigned on purpose by developers  into their programs. Information technology represents the absence 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 Mistake of Zero is Triggered

An event listener was added to the paradigm of the send on the website beneath. We should be seeing a blueish dotted border around the epitome upon clicking it, only instead we receive the 'Cannot read property 'addEventListener' of zero' error in the console.

Misspelling the name of the class when invoking the querSelector() method could exist the reason why. Retrieve that the value of nada means the absence of a value or object. By calling on a value that doesn't exist the mistake of null will announced.

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

An example to be used within the invocation is ('.insertClassName') when calling the name of the grade or ('#insertIdName') when calling the name of the id. Forgetting to exercise so will result in the same error.

The paradigm of the example website above is a representation of the following markup and JavaScript code.

81% of participants stated they felt more confident nearly their tech job prospects after attention a bootcamp. Get matched to a bootcamp today.

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

HTML

            <section course="content-destination">       <h2>Choice Your Destination</h2>       <p>Expedition excursion pattern darn excursion fun, clean uncomplicated organized WordPress Travel colorful webdesign. Traveler blogger website design expedition clean excursion traveling.</p>       <img src="img/destination.jpg" alt="2d slide">     </department>

JavaScript

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

Discover when we invoke the querySelector method, nosotros are calling on the form '.content-dest' when '.content-dest' does not exist in the HTML. If we would have forgotten to utilise the dot in the grade name, we would have received the same mistake also.

Debugging

The value we should exist selecting in our JavaScript is '.content-destination'. Upon correcting this, the error in the console disappears, and we encounter the blueish dotted border created in our outcome listener.

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

Conclusion

The addEventListener method is used as a fashion for users to collaborate with the web folio or document. Null is the absenteeism of a value or object. When we telephone call on a selector that does non exist, or forget to include the dot in class proper noun or hash symbol in id when invoking the querySelector methods, nosotros tin trigger the same fault of null.

maurinwaress.blogspot.com

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

Share this post