Underscores navigation - close nav when menu item clicked

Question

When I click a menu item on Underscores that takes me to another page, then use the browser back button, the navigation is shown. I want to remove the active state from the navigation when an item is clicked. I've pasted what I've tried, but I get:

Uncaught TypeError: links.addEventListener is not a function

JS

( function() {
const siteNavigation = document.getElementById( 'navigation-outer' ); //changed from 'site-navigation' in default Underscores

// Return early if the navigation doesn't exist.
if ( ! siteNavigation ) {
    return;
}

const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];

// Return early if the button doesn't exist.
if ( 'undefined' === typeof button ) {
    return;
}

const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ];

// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
    button.style.display = 'none';
    return;
}

if ( ! menu.classList.contains( 'nav-menu' ) ) {
    menu.classList.add( 'nav-menu' );
}

// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
button.addEventListener( 'click', function() {
    siteNavigation.classList.toggle( 'toggled' );

    if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
        button.setAttribute( 'aria-expanded', 'false' );
        body.className = body.className.replace( ' noscroll', '' ); // My modification
    } else {
        button.setAttribute( 'aria-expanded', 'true' );
        body.className += ' noscroll'; // My modification
    }
} );

// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
document.addEventListener( 'click', function( event ) {
    const isClickInside = siteNavigation.contains( event.target );

    if ( ! isClickInside ) {
        siteNavigation.classList.remove( 'toggled' );
        button.setAttribute( 'aria-expanded', 'false' );
    }
} );

// Get all the link elements within the menu.
const links = menu.getElementsByTagName( 'a' );

// Close menu on item click.
links.addEventListener( 'click', function( event ) {
    siteNavigation.classList.remove( 'toggled' );
    button.setAttribute( 'aria-expanded', 'false' );
    body.className = body.className.replace( ' noscroll', '' );
} );

// Get all the link elements with children within the menu.
const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

// Toggle focus each time a menu link is focused or blurred.
for ( const link of links ) {
    link.addEventListener( 'focus', toggleFocus, true );
    link.addEventListener( 'blur', toggleFocus, true );
}

// Toggle focus each time a menu link with children receive a touch event.
for ( const link of linksWithChildren ) {
    link.addEventListener( 'touchstart', toggleFocus, false );
}

/**
 * Sets or removes .focus class on an element.
 */
function toggleFocus() {
    if ( event.type === 'focus' || event.type === 'blur' ) {
        let self = this;
        // Move up through the ancestors of the current link until we hit .nav-menu.
        while ( ! self.classList.contains( 'nav-menu' ) ) {
            // On li elements toggle the class .focus.
            if ( 'li' === self.tagName.toLowerCase() ) {
                self.classList.toggle( 'focus' );
            }
            self = self.parentNode;
        }
    }

    if ( event.type === 'touchstart' ) {
        const menuItem = this.parentNode;
        event.preventDefault();
        for ( const link of menuItem.parentNode.children ) {
            if ( menuItem !== link ) {
                link.classList.remove( 'focus' );
            }
        }
        menuItem.classList.toggle( 'focus' );
    }
}
}() );

Answer 1

Try catching elements by id with getElementById instead of getElementsByTagName.