How to trigger a function inside Javascript module by pressing a html button

Question

I have this simple app where I'm tyring to trigger a function inside Javascript module by pressing a html button but it seems to do nothing. I looked at another thread about this same topic but does not seem to work for me. As soon as I take the type="module" off from the script tag it works so it propably has something to do with that. Console gives no errors so I have no idea what I'm doing wrong here.

index.html

<body>
    <button id="test">Click me!</button>
    <script type="module" src="/app.js"></script>
</body>

app.js

document.getElementById("test").addEventListener("click", () => {
    console.log("Hello!");
});

Is your script running before the elements have been rendered in the document? Try moving your script tag to the bottom of your body — Ryan Wilson
– Ryan Wilson, Commented Feb 20, 2018 at 17:39
try <button id="test" onclick="alert('ok');">Click me!</button> — Tony Dong
– Tony Dong, Commented Feb 20, 2018 at 17:40
The html document is processed from top down, and at the moment the script runs there is no such thing as document.getElementById("test"), and you will see an error message to that effect in the browser console. — James
– James, Commented Feb 20, 2018 at 17:40
type='module' - I don't think that code is suitable for an ES6 module. Try without type param or type='text/javascript' — James
– James, Commented Feb 20, 2018 at 17:45
stackoverflow.com/questions/37624819/… - I did close this question, but I'm not satisfied the "duplicate" is a duplicate, but you do need to make some changes to your browser settings as James says to get this to work. I've made the change in FF and tested your code and it works fine. @iWillBeMaster. Let me know if that works and I'll close this as the duplicate. — Andy
– Andy, Commented Feb 20, 2018 at 18:03

Maicon Heck · Accepted Answer · 2018-02-20 18:27:41Z

3

It seems that 2 things are missing:

The import statement on your html document and the export statement on your snippet to allow there to be a module and can to be imported.

export function yourModule() { 
  // ...
 }

<script type="module"> import {yourModule} from './app.js';
 </script>

Look this: https://jakearchibald.com/2017/es-modules-in-browsers/

Also, check if your browser already support the module type.

edited Feb 20, 2018 at 18:27

answered Feb 20, 2018 at 18:10

Maicon Heck

2,4171 gold badge24 silver badges27 bronze badges

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

2 Comments

iWillBeMaster Over a year ago

It seems to work on chrome but not on firefox. Apparently i have to do a change to the setting in FF to get it to work.

Maicon Heck Over a year ago

Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config

Collectives™ on Stack Overflow

How to trigger a function inside Javascript module by pressing a html button

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related