Tengo un JavaScript muy simple en un sitio web de desarrollo de Joomla 4x para agregar una clase al primer elemento que encuentra que contiene clases específicas. Funciona perfectamente en la página que contiene esos elementos, pero en cualquier otra página aparece el mensaje "Error de tipo no detectado: el año es nulo". Estoy usando querySelector para que el script se detenga en la primera instancia de la clase CSS, que es lo que quiero.
Este es mi código:
if (document.querySelectorAll('.group-toggle')) { let Years = document.querySelector('.year.toggle-form'); Years.classList.add('form-opened'); }He probado lo siguiente:
function openYears() { if (document.querySelectorAll('.group-toggle')) { let Years = document.querySelector('.year.toggle-form'); Years.classList.add('form-opened'); } }y también
if (document.querySelector('.group-toggle')) { let Years = document.querySelector('.year.toggle-form'); function openYears(){ let Years = document.querySelector('.year.toggle-form'); if (document.querySelector('.group-toggle')) { Years.classList.add('form-opened'); } } }pero aunque el mensaje de error desaparece, el script ya no funciona.
Estoy seguro de que es deslumbrantemente obvio para ti, pero no para mí.
AIT
Si no hay ningún elemento coincidente, el resultado de querySelectorAll será una matriz vacía. Sin embargo, una matriz vacía también es veraz ( if ([]) alert('hi') mostrará la alerta).
En su lugar, puede verificar la longitud de la matriz ( if (document.querySelectorAll(...).length) - cero no es cierto) o reemplazar querySelectorAll con querySelector simple, porque este último busca solo el primer elemento coincidente y lo devuelve ( no es una matriz de elementos), y devolverá un null (que no es cierto) si no se puede encontrar dicho elemento.