0

I am trying to execute a function which is dynamically fetched, but I am getting an undefined error. I think it probably has something to do with scope but I don't know the exact problem.

This is code.

<button onmouseover="function load_script(){import('/script.js')};load_script()" onclick="checker()">Click

The script file is located at root and has these contents.

export const checker = () => console.log(2020);

The browser does fetch the script upon mousehover but it cannot find the function checker on click event which makes me think this problem is related to scope but I can't resolve it.

Any ideas?

Amir
  • 15
  • 3
  • See https://stackoverflow.com/a/59539045 - best solution, remove all inline event handlers and attach them properly using JavaScript instead – CertainPerformance Oct 05 '21 at 23:16
  • @CertainPerformance That question is 12 years old, a lot has changed since then. The answer you referred does not mention how do scopes work with let, const and ES6 modules. I am using dynamic imports which didn't even back then. – Amir Oct 05 '21 at 23:22
  • The answer is from the end of 2019 / beginning of 2020. It explains the scope of inline handlers, and explains the scope of ES6 modules, and looks to adequately cover what you're running into here. – CertainPerformance Oct 05 '21 at 23:27

0 Answers0