Using JS I'm trying to access Document elements to change their classes.
I can
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")
}
}