Vanilla JS TypeError: Cannot read property

cannot read property value declaration of undefined
cannot read property 'addeventlistener' of undefined react native
cannot read property 'valuedeclaration' of undefined
internal error cannot read property valuedeclaration of undefined
typescript cannot read property valuedeclaration of undefined
uncaught typeerror: cannot read property 'addlistener' of undefined
typescript cannot read property of undefined

I have a header with a logo and navigation that has a menu toggle link that displays on smaller viewports. I am try to achieve this with Vanilla JS as I want to move away from jQuery.

When I click on the menu toggle link, I am presented with this error: Uncaught TypeError: Cannot read property 'className' of null at HTMLLIElement.<anonymous> (ignition.js:6) (anonymous) @ ignition.js:6

I'm currently learning Vanilla JS and I am having a bit of trouble understanding what this means and where the error maybe.

const navToggle = document.querySelector(".nav-toggle");

navToggle.addEventListener("click", (event) => {
    const navItem = event.currentTarget.querySelector(".nav-item");

    if (navItem.className.includes("active")) {
        navItem.className.remove("active");
        event.target.find("a").innerHTML("<i class='fas fa-bars'></i>");
    } else {
        navItem.className.add("active");
        event.target.find("a").innerHTML("<i class='fas fa-times'></i>");
    }
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<nav class="navbar">
  <div class="container">
    <ul class="nav-menu">
      <li class="nav-logo"><a href="#">🚀 Ignition <small>Beta</small></a></li>
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Documentation</a></li>
      <li class="nav-item"><a href="#">Theme</a></li>
      <li class="nav-item"><a href="#">Blog</a></li>
      <li class="nav-toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
    </ul>
  </div>
</nav>

This is because when you are clicking on the specific nav-toggle element and attempting to use the querySelector from it, it's going to return null since no nav-item elements exist below it.

It seems like what you would want to do would be to find all of the child elements in your entire menu and apply the necessary logic similar to something like this:

const navToggle = document.querySelector(".nav-toggle");

navToggle.addEventListener("click", (event) => {
    // You'll likely want a reference to your "toggle" element if you need
    // to access it within the loop
    const toggle = event.currentTarget;

    // Get the top level menu
    const menu = document.querySelector(".nav-menu");

    // Get your menu items and iterate through them
    const menuItems = menu.querySelectorAll(".nav-item")

    // Iterate through your individual items here
    menuItems.forEach(navItem => {
         // Add your logic here
    });

});

I receive a 'Uncaught TypeError: Cannot read property 'removeChild , I have the following vanillaJS and receive the Cannot read property 'removeChild ' of null error. The error occurs in the console when I click the 'remove' icon of� // If an element with the class .harry-potter doesn't exist, the browser throws this error: // Uncaught TypeError: Cannot read property 'classList' of null document. querySelector ('.harry-potter'). classList. add ('meh'); // If harry isn't a property of wizards, or house isn't a property of harry, the browser throws this error: // Uncaught

Uncaught TypeError: Cannot read property, main.min.js?ver=2.1:1 Uncaught TypeError: Cannot read property ' getElementsByTagName' of undefined at Object.init (main.min.js?ver=2.1:1)… Running the plain vanilla example with Node.js on the command line results in "TypeError: Cannot read property 'step' of undefined" My webserver is not logging a request/response when I run this example.

navItem is null because you're calling querySelector(".nav-item") on the current target which is the <li class="nav-toggle">...</li> element. That element does not contain any children with class nav-item.

React *Cannot read property 'addEventListener' of undefined*, Another problem with react. I trying to convert vanilla js to react. I have error and i do not have e Tagged with react, javascript. Find answers to your angular js questions Source Url Angular TypeError: Cannot read property ‘id’ of since it isn’t a known property of ‘mat

TypeError: Cannot read property 'valueDeclaration' of undefined , TypeError: Cannot read property 'valueDeclaration' of undefined Also seeing something similar when converting a vanilla js (does use jsdoc)� I can confirm I have the exact same issue today, on Chart.js v2.8.0 on vanilla JS (no react) without solution yet. Copy link Quote reply FlorianGG commented Apr 3, 2019

TypeError: Cannot read property 'getBasePixel' of undefined � Issue , If I specify the different Y axis, i get a TypeError: Cannot read property today, on Chart.js v2.8.0 on vanilla JS (no react) without solution yet. rom1504 changed the title framing.js:66 "crash" TypeError: Cannot read property 'id' of undefined Jan 25, 2019 rom1504 added the non-vanilla label Jan 25, 2019 Copy link Quote reply

Uncaught TypeError: Cannot read property of undefined In JavaScript, Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as� RE : PHP if else question regarding simple to do list By Odellnoekatherine - on July 23, 2020 . You maybe should make your query once in your first while, and stock them in two different arrays, completed and

Comments
  • I produced the runnable code in the answer below, check out if there's something you don't understand?