31

I have an HTML file and a JavaScript module. The JavaScript module exports a function, which I want to call in the HTML file.

index.html

<html>
<head>
  <script type="module" src="app.js"></script>
</head>
<body>
  <button onclick="greet()">Greetings from module</button>
</body>
</html>

index.js

function greet() {
  alert('Hello');
}

When Greetings from module button is clicked, the following error is thrown:

Uncaught ReferenceError: greet is not defined
    at onclick

Note: app.js has to be a marked as a module.

Improve this question
0

3 Answers 3

Reset to default
52

First of all you have to explicitly export you function:

export function greet() {
  alert("Hello from module");
}

Secondly, a module has it's own scope (this is the whole point of modules) thus you need to add the function to the global scope. So, to do it you have to run a script which imports the function and adds it to the window object:

<script type="module">
  import { greet } from "./app.js";
  window.greetFromModule = greet;
</script>

Now you don't need this part <script type="module" src="app.js"></script>

Alternatively you can create an empty obj and add your modules stuff to it, this is what it would look like:

<html>
  <head></head>
  <body>
    <button onclick="greetFromHtml();">greetFromHtml</button>
    <button onclick="module.greet()">greetFromModule</button>
    <script type="text/javascript">
      function greetFromHtml() {
        alert("Hello");
      }
      const module = {};
    </script>
    <script type="module">
      import { greet } from "./app.js";
      module.greet = greet;
    </script>
  </body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Hello mrdarkside many thanks for the response however I am still getting the same error. I have copied and pasted your code but it does not work for me - maybe I am just missing something super basic here... I have added some picture in the question
Hey, try it with a local server, easiest way to do it is to install Live Server extension to VS code. Your browser thinks that your files are from different domains =)
Hi Thanks, I have uploaded the website to the server and it is working. Thank you very much
Which way is more proper if you're looking to impress an employer?
Why window.greetFromModule = greet;? Just greet() at that time will execute it
|
7

myscript.js

export const sampleFunction=()=>{
alert("Hello I'm sample");

}

index.js

import {sampleFunction} from './myscript.js';
window.sampleFunction=sampleFunction;

index.html

<script type='module' src='./index.js'></script>
<button onclick="sampleFunction()">Click me</button>

In the script tag make script type = 'module' and src = './index.js'. Now it should be working.

Improve this answer

Comments

-2

You could also try re-ordering your references in your html document. Put the module that has the function you want to call ahead of the module calling it.

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.