es6 Uncaught ReferenceError: class is not defined
<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>