title: Javascript Class Assign Class Function To Button
body: <p>I have a javascript class (ES6) and I'm trying to assign a function from that class to a button created by the class. This my main class</p>
  
  <pre><code>class tabDrawer {
  constructor(bodyID) {
      this.bodyID = bodyID;
      this.tabArray = [];
      this.initialized = false;
  }
  
  get getBodyID() {
      return this.bodyID;
  }
  
  initialize() {
      this.body = document.getElementById(this.bodyID);
      var baseHTML = "&lt;div id='tabDiv'&gt;&lt;div class='tab'&gt;&lt;/div&gt;&lt;div class='tabContentDiv'&gt;&lt;/div&gt;&lt;/div&gt;";
      this.body.innerHTML = baseHTML;
      this.initialized = true;
  }
  
  addTab(tab) {
      if(this.initialized) {
          var tabClass = "tabLinks";
          if(this.tabArray.length === 0) {
              tabClass += " active";
          }
          console.log(this.tabArray.length);
          this.body.children[0].children[0].innerHTML += "&lt;button class='" + tabClass + "' id='btn" + tab.name + "'&gt;" + tab.tabTitle + "&lt;/button&gt;";
          this.body.children[0].children[1].innerHTML += "&lt;div style='display: none' id='" + tab.name + "' class='tabContent'&gt;" + tab.content + "&lt;/div&gt;"
  
          var tabButton = document.getElementById("btn" + tab.name);
          tabButton.addEventListener("click", evt =&gt; this.openTab(evt));
  
          this.tabArray[this.tabArray.length] = tab;
      }
  }
  
  openTab(index) {
      var tabByIndex = this.tabArray[index];
  
      var i, tabcontent, tablinks;
  
      // Get all elements with class="tabcontent" and hide them
      tabcontent = document.getElementsByClassName("tabContent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
  
      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tabLinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
  
      // Show the current tab, and add an "active" class to the button that opened the tab
      document.getElementById(tabByIndex.name).style.display = "block";
      document.getElementById("btn" + tabByIndex.name).className += " active";
  }
  }
  </code></pre>
  
  <p>When a tab gets added (as seen in addTab()) the class creates a button in the tabDrawers body and I want to assign the function openTab(index) which is also in the class. I know I can't just add the event listener with "this.openTab" as it will refer to the button instead of the class.</p>
  
  <p>The line <code>tabButton.addEventListener("click", evt =&gt; this.openTab(evt));</code>seems to work but I'm not sure how to pass the index parameter to the function as I want the function to still be available to the end user as well so they can do this: <code>tabs.openTab(0);</code> with "tabs" being an instance of tabDrawer.</p>
  
  <p>Can this be done? If so, how can I do this?</p>