En el lado del cliente, he estructurado mi código así:

 client ├── js │ ├── sidebarTemplate.js │ └── scrollToTop.js ├── _view │ ├── index.html │ └── a.html │ ├── b.html │ └── c.html ├── index.js

En detalles: tengo varios archivos html colocados en la carpeta de vista , diferentes funciones de JavaScript personalizadas colocadas en la carpeta js , y el archivo index.js funciona como punto de entrada para la configuración del paquete web. La carpeta de vista tiene archivos index.html, a.html, b.html, c.html. La carpeta js tiene el archivo sidebarTemplate.js que se usa para llenar la barra lateral de todas las páginas html en la carpeta de vista , y el archivo scrollToTop.js que se usa cuando el usuario quiere volver a la parte superior solo para las páginas que tienen un elemento de botón.

En el archivo index.js" , coloco mis funciones Js:

 //add the side bar for all html files addSidebarTemplate(); //Load the page having the button element //if user click the button then run the function to going to the top of the page document.addEventListener('DOMContentLoaded', toTheTop);

La función para completar los elementos de la barra lateral para cada página y funciona perfectamente bien en cualquier página en la que hice clic. Sin embargo, cuando traté de ejecutar la función para desplazarme a la parte superior, por ejemplo, la página c.html. No funcionó. Mirando la consola, para la página c.html, no se mostraron errores, pero para las páginas index.html, a.html y b.html, el error fue "Error de tipo no detectado: no se pueden leer las propiedades de nulo..."

Probé mi código trabajando solo con el archivo c.html y la función toTheTop colocándolo en otra carpeta y funcionó. Entonces, no hay nada malo con mis funciones js.

Mi pregunta general es cómo puedo organizar el archivo index.js para que cuando llame a una función, la función solo funcione para una página html específica, no para todas. Sería genial si pudieran darme algunos artículos para solucionar el problema. ¡Muchas gracias!