Soy nuevo en HTML, CSS y JavaScript. Recibo el error que dice: TypeError: 'undefined' is not an object . Ahora he intentado buscar el problema pero no tuve suerte. ¿Alguien puede ayudar? Se produce un error en la consola en: item.ClassList.container('active') && handleIndicator(item);
var indicator = document.querySelector('.indicator'); var items = document.querySelectorAll('.nav-item'); function handleIndicator(el) { items.forEach(function(el) { item.ClassList.remove('active'); item.removeAttribute('style'); }); indicator.style.width = "".concat(el.offsetWidth, "px"); indicator.style.left = "".concat(el.offsetLeft, "px"); indicator.style.backgroundColor = el.getAttribute('active-color'); el.ClassList.add('active'); el.style.color = el.Attributes('active-color'); } items.forEach(function(item, index) { item.addEventListener('click', function(e) { handleIndicator(e.target); }); item.ClassList.container('active') && handleIndicator(item); }); <nav> <a class="nav-item active" active-color="red">Test 1</a> <a class="nav-item" active-color="blue">Test 2</a> <a class="nav-item" active-color="purple">Test 3</a> <a class="nav-item" active-color="pink">Test 4</a> <div class="indicator"></div> </nav>item.ClassList.remove('active'); debe ser item.classList.remove('active'); . debería estar en minúsculas
Prueba esto:
const indicator = document.querySelector('.indicator'); const items = document.querySelectorAll('.nav-item'); function handleIndicator(el) { items.forEach(e => { e.classList.remove('active'); e.removeAttribute('style'); }); indicator.style.width = "".concat(el.offsetWidth, "px"); indicator.style.left = "".concat(el.offsetLeft, "px"); indicator.style.backgroundColor = el.getAttribute('active-color'); el.classList.add('active'); el.style.color = el.getAttribute('active-color') } items.forEach(item => { item.addEventListener('click', function(e) { handleIndicator(e.target); }); //item.classList.contains('active') && handleIndicator(item); }); <nav> <a class="nav-item active" active-color="red">Test 1</a> <a class="nav-item" active-color="blue">Test 2</a> <a class="nav-item" active-color="purple">Test 3</a> <a class="nav-item" active-color="pink">Test 4</a> <div class="indicator"></div> </nav>