如何从 html onclick 中的 javascript 模块调用函数

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