<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
How can I call a function from javascript module in html onclick
Viewed 1061
4 Answers
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>This is what your script should look like:
<script>
function sayHello(){
console.log('hello')
}
</script>
<button onclick="hellosay()">Click</button>
<script type="module">
window.hellosay=()=>{
console.log("hello")
}
</script>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
Related