How to call javascript functions inside a <script type="module"> from HTML element events?

Question

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?

Answer 1

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>

Answer 2

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>