Hi, I have a JS function called generateTOC() which generates a table of content based on headline elements on a page.
I put the code for this function in the Global JS, because I would like to have generateTOC() generally available for all layouts or pages where I want to automate the generation of a TOC.
I then want to call this function only on those layouts or pages where it is really needed, so I would like to put the call-code in the page-specific or layout-specifc JS.
I call this function with document.addEventListener('DOMContentLoaded', generateTOC);
However, this doesn’t work. It works only if both the function code and the event listener are in the same JS, either both in the Global JS, or both in the layout-specific JS. My guess is: it does not work because the Global JS is not yet available by the time the event listener in the layout-specific JS tries to call the function.
What do you suggest to change so that the code can be maintained globally (in Global JS), while the decision to call the function can be made on the page or layout level?