Call function from JavaScript module in HTML

Question

Say, I have the following JavaScript module using Vue:

import Vue from "./vue/vue.esm.browser.js";

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!',
    }
});

// Custom function for calling by the button
function changeMessage() {
    app.message = 'Hello from button!';
}

Now I refer to this module:

<script src="js/site.js" type="module"></script>

Then I try to call changeMessage:

<button onclick="changeMessage();">Press me</button>

However, I get the following error in console:

Uncaught ReferenceError: changeMessage is not defined at HTMLButtonElement.onclick

Moreover, in Visual Studio I don't even get it in IntelliSense. When I remove type="module", then everything works fine. How to make html see the module functions?

as @MarsAndBack stated, you need to understand how to export that function and import when needed. More on this stackoverflow.com/questions/49338193/… — Jimish Fotariya
– Jimish Fotariya, Commented Nov 2, 2019 at 12:16

Decade Moon · Accepted Answer · 2019-11-02 12:11:09Z

4

You can define the function on the global window object:

<script type="module">

  window.greet = function () {
    alert('Hello')
  }

</script>

<button onclick="greet()">Hello</button>

edited Nov 2, 2019 at 12:11

answered Nov 2, 2019 at 12:01

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

4 Comments

Decade Moon Over a year ago

I've updated my answer to demonstrate how it should work. If it isn't working for you, then there must be something else you're doing. Can you include a snippet?

JohnyL Over a year ago

You won't believe it, but if I rename file site.js to some other name (say, site2.js), then the code works! Does name site.js have special meaning?

JohnyL Over a year ago

I figured it out that this behavior is due to browser caching. I just took a look at JS file that browser loads - and it was outdated file. That's it! 😆

Kalnode Over a year ago

In any case, you should still learn about import/export if you actually want to make use of modules.

Collectives™ on Stack Overflow

Call function from JavaScript module in HTML

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related