title: es6 Uncaught ReferenceError: class is not defined
body: <p>I'll try to keep this short.</p>
  
  <p>My problem is a typical beginner's problem. Basically, I'm trying to pull off an <code>onClick="function();"</code> with a button in my index. Every time click on said button I get a <code>Uncaught ReferenceError: controller is not defined(…) index.html:34</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Config.js \/
  window.onload = config;
  
  function config() {
      let controller = new Controller();
  }
  // Config.js /\
  
  class Controller {
  
    constructor() {
      // classes
      let block = new Block();
      let view = new View(this);
      let page = new Page();
    }
  
    spawnBlock() {
      this.view.drawBlock(page.getWidth() / 2, page.getHeight() / 2);
    }
  
  }
  
  // The other classes
  class View {
  
    constructor(Controller) {
      let canvas = document.getElementById('canvas');
      let pen = canvas.getContext('2d');
  
      let block = Controller;
    }
  
    drawBlock(x, y) {
      pen.beginPath();
      pen.moveTo(0, 0);
      pen.lineTo(x, y);
      pen.stroke();
  
      // Alt \/
      // let posX = x;
      // let posY = y;
    }
  
  }
  
  class Block {
  
    constructor() {
      // ...
    }
  
    // ...
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!-- V 0// --&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Index&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;script type="text/javascript" src="script/Block.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/View.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/Controller.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/dump/page.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="script/config.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              // (config() {
              //     let controller = new Controller();
              // })();
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
              * {
                  margin: 0px;
                  padding: 0px;
              }
              
              canvas {
                  width: 700px;
                  height: 400px;
                  border: solid black 1px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;center&gt;
              &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
              &lt;br&gt;&lt;button id="button" onClick="controller.spawnBlock();"&gt; Click me &lt;/button&gt;
              &lt;!-- /\ Uncaught ReferenceError: /\ --&gt;
          &lt;/center&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Whether I write <code>onClick="class.function();"</code> or simply <code>onClick="function();"</code>, it won't work. When I try the former option, it tells me the class is not defined. And when I try the latter option it tells me the function is not defined.</p>
  
  <p>I've asked a few classmates and none of them could figure it out. One got it to work with syntax you'd use with the old JavaScript, but that's not what I'm aiming for.</p>
  
  <p>I've tried Stachoverflow and google in general but came up with nothing that helped, or that was understandable. I'm using nothing like Jquery or any plugins. Just html, css and JavaScript.</p>
  
  <p>Thanks for the read. Perhaps it was a bit too much for such a simple question but I'd rather be thorough than looked over.</p>
  
  <p>Thank you in advance if you reply</p>