title: javascript classes access function of object
body: <p>This is my first time using javascript classes . I am using classes to return an html form . When the form is submitted I want to show an alert box that says &quot; &quot;submitted&quot; . I have a problem doing this with classes as my submit function is not recognised .</p>
  <pre><code>export default class Contact extends AbstractView {
      
    constructor(){
      super();
      this.setTitle(&quot;Contact Us&quot;);
    }
  
    test(e){
      e.preventDefault();
      alert('submitted');
    }
  
    async getHTML(){
       return ` 
         &lt;form method = &quot;POST&quot; onsubmit = &quot;test(this)&quot;&gt;
            &lt;h2  &gt; Send Message &lt;/h2&gt;
            &lt;div class = &quot;inputBox&quot;&gt;
              &lt;input type = &quot;text&quot; name = &quot;&quot; required = &quot;required&quot; /&gt;
              &lt;span&gt; Full Name  &lt;/span&gt;
            &lt;/div&gt;
            &lt;div class = &quot;inputBox&quot;&gt;
              &lt;input type = &quot;submit&quot; name = &quot;&quot; value=&quot;Send&quot;/&gt;
            &lt;/div&gt;
          &lt;/form&gt;`;
    }
  
  
  }
  </code></pre>
  <p>I want this test() function specifically for my contact object so I did not initialize it in my constructor .</p>
  <p>The form is submitted with no alert shown and I get no error .</p>
  <p>I am using classes to return html code for a single page app using vanilla js .</p>
  <p>My index.js handles this functionality based on the url hash and appends the html from <code>getHtml()</code> to a <code>&lt;div&gt;</code></p>
  <p>index.js</p>
  <pre><code>import DashBoard from './views/DashBoard.js';
  import Posts from './views/Posts.js';
  import Settings from './views/Settings.js';
  import Contact from './views/Contact.js';
  
  
  
  window.addEventListener(&quot;hashchange&quot;,()=&gt;Router() );
  
  document.addEventListener(&quot;DOMContentLoaded&quot; , ()=&gt;{
    document.body.addEventListener('click',(e)=&gt;{
      if(e.target.matches(&quot;[data-link]&quot;)){
        e.preventDefault();
        navigateTo(e.target.href);
      }
    });
    Router();
  });
  
  function navigateTo(url){
    history.pushState(null,null,url);
    Router();
  }
  
  
  async function Router (){
    const routes = [
      {path: &quot;#&quot; , view:DashBoard},
      {path: &quot;#posts&quot; , view:Posts},
      {path: &quot;#settings&quot; , view:Settings},
      {path:&quot;#contact&quot;, view:Contact},
    ];
  
    const potentialMatches = routes.map((route)=&gt;{
      return {route:route , isMatch:location.hash===route.path}
    });
    
    let match = potentialMatches.find(potentialMatch=&gt;potentialMatch.isMatch);
    if(!match){
  
      match = {
        route:routes[0],
        isMatch:true,
      }
  
    }
    const view = new match.route.view();
    let content = await view.getHtml();
    document.querySelector('#app').innerHTML = content;
  
  };
  </code></pre>