title: How to call ES6 module function from onclick
body: <p>I have some HTML with a button whose <code>onclick</code> event triggers a JavaScript function. </p>
  
  <p>I need to achieve the same behavior when the JavaScript function is an ES6 module function.</p>
  
  <p>I have a simple example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;script src="./js1.js"&gt;&lt;/script&gt;
    &lt;script type="module" src="./js2.js"&gt;&lt;/script&gt;
    &lt;script type="module"&gt;
      import { Es6Module3 } from "./js3.js";
      document.querySelector('#myFunction3').addEventListener('click', Es6Module3.myFunction3);
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;button onclick="myFunction1(1)"&gt;button1&lt;/button&gt;
    &lt;button onclick="Es6Module2.myFunction2(2)"&gt;button2&lt;/button&gt;
    &lt;button type="button" id="myFunction3"&gt;button3&lt;/button&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It's also reproduced at <a href="https://jsfiddle.net/avnerm/jho6qgLu/18/" rel="noreferrer">https://jsfiddle.net/avnerm/jho6qgLu/18/</a></p>
  
  <p>When clicking <em>button1</em>, the function <em>myFunction1</em> in <em>js1.js</em> is called, and the value that is passed in is printed properly into the console. good!</p>
  
  <p>But when clicking <em>button2</em> I get a message:</p>
  
  <blockquote>
    <p>ReferenceError: Es6Module is not defined</p>
  </blockquote>
  
  <p>At some point I was able to trigger a module function (the use case of <em>button3</em>) by setting an event listener, but it's not working now and I don't know how to pass a parameter into the function in this implementation.</p>
  
  <p>In my case, I need to be able to pass in a parameter.</p>
  
  <p><strong>How can I call a ES6 module function from the onclick attribute, and pass a parameter to it?</strong></p>
  
  <hr>
  
  <p>EDIT:<br/>
  @CertainPerformance, My original html code involves jinja2, which spans the code 3 times (3 groups with ids: 1, 2, 3)</p>
  
  <p>I used your pattern, and it created 3 buttons (button1, button2, button3) with 3 event listeners. When I click on each button I can see in the log the appropriate group id.</p>
  
  <p><strong>This works for me perfectly!</strong> </p>
  
  <p>I just wanted to confirm that this is the way to deal with html, jinja2, and es6.</p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Es6Module2 {
      static myFunction2 = function(val) {
          console.log('BEG myFunction2');
          console.log('val'); 
          console.log(val); 
      };
  };
  
  export { Es6Module2 };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{% block content %}
  
  &lt;div class="admin-view-groups"&gt;
      {% for group in groups %}
          &lt;button id="button{{group.id}}"&gt;Download Group&lt;/button&gt;
          &lt;script type="module"&gt;
           import { Es6Module2 } from './Es6Module2.js';
           document.querySelector('#button{{group.id}}').addEventListener('click', () =&gt; {
               Es6Module2.myFunction2({{ group.id }});
           });
          &lt;/script&gt;
      {% endfor %}
  &lt;/div&gt;
  
  {% endblock %}</code></pre>
  </div>
  </div>
  </p>