Consider this basic function in /js/foo.mjs:
export function foo( ) {
console.log('Hello, Modularity!');
};
How to import foo function inside an HTML document, so it can be used inline?
<html>
<head>
<script type=module src=/js/foo.mjs></script>
</head>
<body>
<button onclick=foo()>Modules are Cool</button>
</body>
</html>
Yes, I just can define the function in window object:
window['foo'] = function _foo( ) {
console.log('Hello, Whatever!');
};
But this is something I want to avoid; maybe there is a way to somehow import a function or a variable so it will be accessible inside the whole HTML document?
I guess I can do this:
onclick='import { foo } from "/js/foo.mjs"; foo()'
But this is ugly as hell.
addEventListener?