title: How to load an es6 module in an html page on the load event
body: <p>I am new to ES6 modules, please could you let me know how I can import a function from an ES6 module on a web-page and then use that function on a click event on a button.</p>
  
  <p>So far I have defined this module in a file called (ES6Part3Module.js):</p>
  
  <pre><code>export function sayHello() {
  return "hi there folks";
  }
  </code></pre>
  
  <p>Then in my html page I have loaded the module in this way:</p>
  
  <pre><code>`&lt;script src="ES6Part3Module.js" type="module"`&gt;`&lt;/script`&gt;
  </code></pre>
  
  <p>I now want some way of creating a click handler for a button on the page:</p>
  
  <pre><code>`&lt;button id="sayHelloButton"`&gt;Say Hello`&lt;/click`&gt;
  </code></pre>
  
  <p>which calls the sayHello() function from my ES6 module.</p>
  
  <p>I have tried creating a local (module) script on my page:</p>
  
  <pre><code>`&lt;script type="module"`&gt;
  import sayHello from "ES6Part3Module.js";
  window.hello = sayHello;
  `&lt;/script`&gt;
  </code></pre>
  
  <p>and then having some jquery on the page which runs on load:</p>
  
  <pre><code>$( function() {
  
  $("#sayHelloButton").click(function() {
  alert(hello());
  });
  
  });
  </code></pre>
  
  <p>But when the button on the html page is clicked, I get an error, saying that hello is not defined.</p>
  
  <p>Please could you let me know what I am doing wrong?</p>