Estoy tratando de agregar el código en esta página: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements
pero me da un error en el js:
TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'getElementsByClassName') en main.js?ver=5.8.2:35
Estoy tratando de agregarlo en: https://nuovosito.lealternative.net/test-browser-4/
Parece funcionar bien, excepto que no puede encontrar una clase activa para el botón actual.
EDITAR:
aquí la parte del código que da error:
// Add active class to the current button (highlight it) var btnContainer = document.getElementById("myBtnContainer"); var btns = btnContainer.getElementsByClassName("bottone"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function(){ var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); }Su problema es que el script se ejecuta antes #myBtnContainer se haya cargado en la página. Esto se puede solucionar colocando su etiqueta <script> para main.js en su <body> debajo de todo el resto del contenido HTML, o agregando la etiqueta defer de esta manera:
<script src='https://nuovosito.lealternative.net/wp-content/themes/twentytwentyone/assets/js/main.js?ver=5.8.2' id='js-file-js' defer></script> Otra forma de solucionarlo sería envolver todas sus secuencias de comandos en un detector DOMContentLoaded , lo que hará que las cosas internas solo se ejecuten después de que se carguen todos los elementos HTML.
document.addEventListener('DOMContentLoaded', () => { // put your whole script here });