从html调用函数内部的JavaScript函数

Question

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.

Answer 1

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 (or attachEvent if you need to support obsolete Microsoft browsers; if you do, my answer here has a cross-browser function you can use). 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>