Struggling a bit with nested functions. Problem, I want to call a function from my HTML, but all my JavaScript sits inside to wait for the DOM loaded function.
If I take the function I want to call out of the DOM loaded function, I can not access the variables from inside the DOM loaded function.
Presumably when you say you "call a function from [your] HTML" you mean:
<div onclick="yourFunction()">...</div>
...or similar.
This is one of the many reasons not to use onxyz-attribute-style event handlers: You can only call your own functions if they're globals.
Instead, hook up the handlers with modern event handling techniques, such as addEventListener. If you do that, you can use any function in-scope of your code doing the hookup, it doesn't need to be a global anymore.
Simple example:
(function() {
// Not global
function fooClick() {
console.log(".foo clicked");
}
// Hook it up
document.querySelector(".foo").addEventListener("click", fooClick);
})();<div class="foo">Click me</div>
