title: Cannot access previously set variable on class with onclick function
body: <p>So I'm trying to keep my javascript project organised by using classes and an init function, now I'm having this weird problem I never have experienced before. This is my code:</p>
  <pre class="lang-js prettyprint-override"><code>class App {
      constructor() {
          this._username;
      }
  
      authenticate() {
          this._username = &quot;test&quot;;
      }
  
      submitForm() {
          console.log(this._username);
      }
  }
  
  const init = function () {
      const app = new App();
  
      document.getElementById(&quot;authenticationVerify&quot;).onclick = app.authenticate;
      document.getElementById(&quot;btnSendSMS&quot;).onclick = app.submitForm;
  }
  
  window.onload = init;
  </code></pre>
  <p>And HTML (simplified)</p>
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;main&gt;
          &lt;form id=&quot;formSendSMS&quot;&gt;
              &lt;input type=&quot;button&quot; name=&quot;send&quot; id=&quot;btnSendSMS&quot; value=&quot;Versturen&quot;&gt;
          &lt;/form&gt;
  
          &lt;div id=&quot;authentication-prompt&quot;&gt;
              &lt;form&gt;
                  &lt;input type=&quot;button&quot; name=&quot;login&quot; id=&quot;authenticationVerify&quot; value=&quot;Log in&quot; class=&quot;button blue&quot;&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/main&gt;
      &lt;script src=&quot;js/mainBack.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>As you can see in the console, I get &quot;undefined&quot; when I activate the second button press, but I really don't know why this is happening, since the 'app' is not getting redeclared.</p>
  <p><a href="https://i.stack.imgur.com/EvnZr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EvnZr.png" alt="'undefined' in console" /></a></p>
  <p>Kind regards,
  Jasper</p>