I have a simple HTML page, which is importing a JS module as follows:
.. snip
<button onclick="btnClick()">Go!</button>
<script type="module">
import { func1 } from './utils.js'
function btnClick() {
func1()
}
</script>
Clicking the button produces an error: btnClick() is not defined.
Why is this happening? How to bring these functions back into correct scope?
The javascript execution stack has own scope, so, simple and easy solution is, you can assign to window scope your accessible functions like below;
<button onclick="btnClick()">Go!</button>
<script type="module">
import { func1 } from './utils.js'
function btnClick() {
func1()
}
// variable function
window.btnClick = btnClick;
// or anonymous function
window.btnClick = function(youCanSetParams){
func1()
}
</script>
window._myFns = { btnClick, onLoad }when the script is with module type it can only listen to events and you can not call to function from the html , so you can add an EventListener to the click event , check the id of the target element that call dispatch the event and then call to the function:
<script type="module">
import { func1 } from './utils.js'
window.addEventListener('click' , e=> {
switch(e.target.id){
case 'btnGo':
btnClick();
break;
}
})
function btnClick() {
func1()
}
</script>
<html>
<button id="btnGo">Go!</button>
</html>
Variable from "module" are not accessible from outside so use type="text/javascript" as
<script type="text/javascript">
function btnClick() {
console.log('here')
}
</script>
<button onclick="btnClick()">Go!</button>
