es6 Uncaught ReferenceError: class is not defined

javascript oop model-view-controller ecmascript-6

28,118

Solution 1

I would recommend reading about how scoping works in JavaScript. You created your controller variable inside the config function. This controller variable is local to this function and cannot be accessed outside it.

Try changing it from:

window.onload = config;

function config() {
    let controller = new Controller();
}

window.onload = config;
let controller;

function config() {
    controller = new Controller();
}

As a side note, it's generally considered better practice to not set inline event handlers in your HTML. I would recommend reading up on addEventListener. A minimal example:

let button = document.getElementById('button');

button.addEventListener('click', () => {
  controller.startBlock();
});

Solution 2

Your controller is local to the config function only:

function config() {
    let controller = new Controller();
}

When you reference this in your HTML, you need a global variable, not the above local variable, which is not accessible.

A simple fix is to declare your variable on the global object:

function config() {
    window.controller = new Controller();
}

Note that you can use the DOMContentLoaded instead of the load event, since the first fires sooner, but still after the DOM is parsed:

document.addEventListener("DOMContentLoaded", config);

Solution 3

You could try to instantiate the controller object in body onload event.

<body onload="init()" >

function init() {
   controller = new Controller();
   document.getElementById("button").addEventListener("click", controller.spawnBlock());
}

Doing this, you will guarantee that all the document is loaded before running any scripts.

Hope that will help.

28,118

Author by

a.anev

Updated on December 15, 2020

Comments

a.anev over 3 years

I'll try to keep this short.

My problem is a typical beginner's problem. Basically, I'm trying to pull off an onClick="function();" with a button in my index. Every time click on said button I get a Uncaught ReferenceError: controller is not defined(…) index.html:34

// 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() {
    // ...
  }

  // ...

}

<!DOCTYPE html>
<!-- V 0// -->
<html>
    <head>
        <title>Index</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="script/Block.js"></script>
        <script type="text/javascript" src="script/View.js"></script>
        <script type="text/javascript" src="script/Controller.js"></script>
        <script type="text/javascript" src="script/dump/page.js"></script>
        <script type="text/javascript" src="script/config.js"></script>
        <script type="text/javascript">
            // (config() {
            //     let controller = new Controller();
            // })();
        </script>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            
            canvas {
                width: 700px;
                height: 400px;
                border: solid black 1px;
            }
        </style>
    </head>
    <body>
        <center>
            <canvas id="canvas"></canvas>
            <br><button id="button" onClick="controller.spawnBlock();"> Click me </button>
            <!-- /\ Uncaught ReferenceError: /\ -->
        </center>
    </body>
</html>

Whether I write onClick="class.function();" or simply onClick="function();", 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.

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.

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.

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.

Thank you in advance if you reply

a.anev over 7 years

I already had a feeling the right answer was something like that. Thanks a ton. I tried to do something similar but with var's, and in the Controller class only to get errors. Seems like you can't make variables right above the constructor. Now I just have to figure out how to define my functions and make them usable from other classes.