How can I call a function from javascript module in html onclick

Question

<h1 onclick="sayhello()"> Hello Word</h1>

<script type="module" >
        sayhello=()=>{
            console.log('Hello');
        }
</script>

result is: (index):14 Uncaught ReferenceError: sayhello is not defined at (index):14

Answer 1

You should either remove type=module:

<h1 onclick="sayhello()">Click</h1>
<script  >
    sayhello=()=>{
        console.log('Hello');
    }
</script>

Or attach the function to window to use it globally:

<h1 onclick="sayhello()">Click</h1>
<script type="module">
    window.sayhello=()=>{
        console.log('Hello');
    }
</script>

Answer 2

This is what your script should look like:

<script>
  function sayHello(){  
    console.log('hello')
  }
</script>

Answer 3

<button onclick="hellosay()">Click</button>
<script type="module">
  window.hellosay=()=>{
  console.log("hello")
  }
</script>

Answer 4

For javascript modules create a .js or .mjs file and export your javascript functions

Mymodule.js

export function sayHell(){
    console.log("ok");
}

and import it.

Samples here https://github.com/mdn/js-examples/tree/master/modules/basic-modules

Documentation here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules