JavaScript - Call function from another module inside HTML page

Question

I have a module i18n.js which I import in my home.html, like this:

<html>
  <head></head>

  <body>
    <script type="module" src="../js/lib/i18n.js"></script>
  </body>
</html>

Inside the i18n.js module, I do the following:

export const t = () => {};

//
// Global scope
//

window.t = t;

I understand that accessing the global window object is the way to go in order to be able to call a method from other file inside an HTML page. But... why is this code not working?

<html>
  <head></head>

  <body>
    <p><script>t("title")</script></p>
    <script type="module" src="../js/lib/i18n.js"></script>
  </body>
</html>

I get the error:

Uncaught ReferenceError: t is not defined

1. You are loading the script after calling it, hence undefined. 2. Putting code on HTMl will make it readable to everyone. So bad option. Instead, assign a selector to p and set it in JS on load — Rajesh Dixit
– Rajesh Dixit, Commented Aug 26, 2022 at 3:52

colecmc · Accepted Answer · 2022-10-05 23:55:34Z

1

Because you're trying to execute t before it's available on the window, you get an error but running the function through the onload as @Rajesh suggested works properly.

const t = () => {
const pTitle = document.getElementById('pTitle');

  if (pTitle){
    pTitle.textContent = 'Hello World!';
  }
};

//
// Global scope
//

window.t = t;

export {
  t
};

<html>
  <head></head>

  <body onload="t()">
    <p id="pTitle">&nbsp;</p>
  <script type="module" src="./src/js/i18n.js"></script>
  </body>
</html>

answered Oct 5, 2022 at 23:55

colecmc

3,3283 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript - Call function from another module inside HTML page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related