Using JS I'm trying to access Document elements to change their classes.

I can

• select them elements and put them into an array, using getElementsByClassName
• apply an event listener to the whole lot
• create a function for that event listener to fire.
• log all alements
• log the click event
• use console.dir to view the document properties

But I can not access to properties like classList, nextElementSibling, etc., which is what I need to do.

if I try

event.target.nextElementSibling.classList

I get on the console

Uncaught TypeError: Cannot read properties of null (reading 'classList')

If inside my function I try something like

activeSubmenu = document.getElementsByClassName("submenu--active")[0]

and then activeSubmenu.nextElementSibling

I get the same error message about can not read properties of null..If I console log activeSubmenu, I get a piece of HTML.

What I am doing wrong here? Why can't I add, remove and toggle the classes of my elements?

const submenues= Array.from(document.getElementsByClassName("wrapper"));

submenues.forEach(submenu => {
    submenu.addEventListener('click', toggle_submenu);
  });

function toggle_submenu(event) {
    console.log(event);
    console.log(submenu_wrappers);
    console.log(event.target);
    
    let activeSubmenu = document.getElementsByClassName("submenu--active")[0];
    if (activeSubmenu != null) {
        activeSubmenu.nextElementSibling.classList.toggle("submenu--active")
    }

}