Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

Question

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective section of the page. However, the issue arises when I try to do two consecutive clicks – an error saying “Cannot read property parentNode of undefined” is thrown. It seems like the problem lies in how I am hiding the ul element. On the first click, I change the display to none (initially set to visible), but I have to wait until it becomes available again in the DOM before I can hide it once more.

I am currently exploring possible solutions to address this issue. You can find the codepen with the implementation here.

Thank you,

jade

// BEM terminology added, but not yet implemented. Just basic css down there 

nav.desktop
  ul
    li
      a(href="") Home
    li
      a(href="") About
    li
      a(href="") Labs
    li
      a(href="") Contact 

nav.mobile
  .hamburger
    button.hamburger__btn Toggle
    span.hamburger__top
    span.hamburger__middle
    span.hamburger__bottom
  ul.navigation--mobile--hidden
    li
      a(href="") Home
    li
      a(href="#about") About
    li
      a(href="#labs") Labs
    li
      a(href="#contact") Contact
main
  section#about
    h1 About
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse dolorum, accusamus officiis possimus cupiditate facere, sequi illum nobis saepe quidem repudiandae magnam natus cum animi repellendus. Illum qui, nobis voluptas.
  section#labs
    h1 Labs
    p  Lorem ipsum dolor sit amet, consectetur ...

// Additional CSS styles follow...

// JavaScript

$(function () {
  var hamburgerBtn =  document.getElementsByClassName('hamburger__btn')[0];
  var navBar = hamburgerBtn.parentNode.parentNode;
  var navBarUlEl = navBar.getElementsByTagName('ul')[0];

  // Makes the hamburger btn clickable
  hamburgerBtn.onclick = function() {
    toggleClass(navBarUlEl);

     var ulNavFlex = document.getElementsByClassName('navigation--mobile--flex')[0];
    var navBarFlex = ulNavFlex.parentNode;

    console.log('This is the ulnavflex: ' + ulNavFlex);
    console.log('This is the navflex: ' + navBarFlex.classList);
    console.log('This is the navbar: ' + navBar.classList);

    var ulNavFlexLinks = ulNavFlex.getElementsByTagName('a');

    console.log(ulNavFlexLinks);
    console.log(ulNavFlex)


    for (var i = 0; i < ulNavFlexLinks.length; i++) {
      toggleLinkClick(ulNavFlexLinks[i]);
    }
}

  // Toggles Link Clicks
  var toggleLinkClick = ...

// The script continues...

javascript html css

Answer 1

Answer №1

It appears that there is a logical error in the code. When a section is selected from the menu, two classes - animate and navigation--mobile--hidden are added in the toggleLinkClick listener. However, when the menu is clicked again, the toggleClass function fails to update the class properly. To resolve this issue, you can modify the toggleClass function as shown below:

 var toggleClass = function(el) {
    if ($(el).hasClass('navigation--mobile--hidden')) {
      el.className = 'navigation--mobile--flex';
    } else if ($(el).hasClass('navigation--mobile-flex')) {
      el.className = 'navigation--mobile--hidden';
    } else {
      el.className = 'navigation--mobile--hidden';
    }
  }

Please note: I have used jQuery to check for the existence of a class since you have utilized jQuery.

Alternatively, another way to address this issue is to remove the animate class once the animation is completed in your toggleLinkClick listener, like so:

 var toggleLinkClick = function(el) {
    el.onclick = function() {
        console.log('I was clicked from: ' + el)
        if (navBarUlEl.classList == 'navigation--mobile--flex') {
          navBarUlEl.classList.add('animate');
          navBarUlEl.classList.remove('navigation--mobile--flex');
          navBarUlEl.classList.add('navigation--mobile--hidden');
          navBarUlEl.classList.remove('animate');
        }
        console.log(navBarUlEl.classList);
      }
  }

In this scenario, you won't need to modify your toggleClass function to include an if statement.

For a demonstration of the second solution, visit this CodePen link. And for the first solution, refer to this CodePen link.

Answer 2

It appears that there is a logical error in the code. When a section is selected from the menu, two classes - animate and navigation--mobile--hidden are added in the toggleLinkClick listener. However, when the menu is clicked again, the toggleClass function fails to update the class properly. To resolve this issue, you can modify the toggleClass function as shown below:

 var toggleClass = function(el) {
    if ($(el).hasClass('navigation--mobile--hidden')) {
      el.className = 'navigation--mobile--flex';
    } else if ($(el).hasClass('navigation--mobile-flex')) {
      el.className = 'navigation--mobile--hidden';
    } else {
      el.className = 'navigation--mobile--hidden';
    }
  }

Please note: I have used jQuery to check for the existence of a class since you have utilized jQuery.

Alternatively, another way to address this issue is to remove the animate class once the animation is completed in your toggleLinkClick listener, like so:

 var toggleLinkClick = function(el) {
    el.onclick = function() {
        console.log('I was clicked from: ' + el)
        if (navBarUlEl.classList == 'navigation--mobile--flex') {
          navBarUlEl.classList.add('animate');
          navBarUlEl.classList.remove('navigation--mobile--flex');
          navBarUlEl.classList.add('navigation--mobile--hidden');
          navBarUlEl.classList.remove('animate');
        }
        console.log(navBarUlEl.classList);
      }
  }

In this scenario, you won't need to modify your toggleClass function to include an if statement.

For a demonstration of the second solution, visit this CodePen link. And for the first solution, refer to this CodePen link.

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

Answer №1

Similar questions

Node.js allows for keeping pipe and sockets open even after streaming an HTTP response

Need help speeding up website load times?

manipulating dropdown visibility with javascript

What is a creative way to get rid of old content on a webpage using jQuery without relying on the

Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

Is there a way to transform JSON text into a JSON object?

Enhancing visual aesthetics with Vuetify on v-slot label components

The request cannot be completed using GET. The connection has not been established, and the offline queue is not activated

When the parent element has a fixed position, the child element will no longer maintain its floating property

Having trouble changing fonts in JavaScript Photoshop using scripting on certain fonts

What is the best way to set up a React handler that can handle multiple values effectively?

Utilize Bootstrap tooltips to display live results fetched via an AJAX call

Invoke a function using the output of a different function

Is there a way to detect a specific button press in react-native-picker-select?

Creating dynamic movement on webpages using CSS3 Animations

The issue of basic authentication failing to function on Internet Explorer and Chrome, yet operating successfully on Firefox

What is the best way to encode only a specific section of a JavaScript object into JSON format?

Inverted CSS Shadow Box

Explore the various timer functionalities available in Angular.js

Pressing a button through xpath