Intentando crear un estado activo en el último botón de la barra de navegación en el que se hizo clic. Actualmente, agregará la clase a cada elemento seleccionado, pero el bucle for...of no parece eliminar la clase.
La barra de navegación se crea dinámicamente con el siguiente código:
function buildNavBar(){ for (section of sections){ numberOfSection = section.getAttribute('data-nav'); idOfSection = section.getAttribute('id'); navBarList = document.createElement('li'); //Uses template literal strings to present the section names in the nav bar navBarList.innerHTML = `<a class='menu__link' href='#${idOfSection}'>${numberOfSection}</a>`; navBar.appendChild(navBarList); } } document.getElementById('navbar__list').addEventListener("click", function(event){ function removeStyle(){ let funcElem_Style = 'funcElemStyle'; let menuLinks = document.querySelectorAll('menu__link') menuLinks = document.getElementsByClassName('funcElemStyle') for(menuLink of menuLinks){ menuLink.classlist.remove('funcElemStyle') } } event.target.classList.add("funcElemStyle"); });No use for...of para iterar sobre HTMLCollections en vivo como lo que devuelve getElementsByClassName . La razón es que en ese ciclo está ejecutando un código que lleva a que el elemento se elimine de la colección en vivo instantáneamente, lo que a su vez para for...of (que internamente funciona basado en índices) significa que el siguiente elemento para iterar sobre en realidad es el elemento que sigue al siguiente, lo que lleva a un bucle que afecta solo a uno de cada dos elementos de la colección.
En su lugar, distribuya el resultado en una matriz e itérelo.
A continuación, estas dos líneas no tienen sentido:
let menuLinks = document.querySelectorAll('menu__link') menuLinks = document.getElementsByClassName('funcElemStyle') document.querySelectorAll('menu__link') encontraría elementos <menu_link> (que serían elementos no válidos y su página probablemente no los tenga). Probablemente quiso seleccionar todos los elementos con esa clase CSS de esta manera: document.querySelectorAll('.menu__link') ?
En la siguiente línea, sobrescribe directamente lo que acaba de intentar seleccionar del DOM: menuLinks = document.getElementsByClassName('funcElemStyle') .
Dentro de su función de escucha de eventos anónimos, declara otra función removeStyle() a la que nunca llama.
Dicho esto, esto es probablemente lo que buscas:
document .getElementById('navbar__list') .addEventListener('click', function(event) { for (const menuLink of [...document.querySelectorAll('.menu__link')]) { menuLink.classlist.toggle('funcElemStyle', event.target === menuLink) } } );