Question

我会尽量保持这一点。

我的问题是一个典型的初学者问题。基本上，我试图用索引中的按钮拉出onClick="function();"。每次点击所述按钮，我都会得到Uncaught ReferenceError: controller is not defined(…) index.html:34

＆＃13;

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

＆＃13;

<!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>

＆＃13;

无论是写onClick="class.function();"还是仅onClick="function();"，它都无法发挥作用。当我尝试前一个选项时，它告诉我类未定义。当我尝试后一个选项时，它告诉我函数没有定义。

我问了几个同学，但没有人能搞清楚。人们可以使用旧的JavaScript来使用语法，但这不是我的目标。

我已经尝试过Stachoverflow和google，但是没有任何帮助，或者这是可以理解的。我没有像Jquery或任何插件那样使用任何东西。只是html，css和JavaScript。

感谢您的阅读。对于这样一个简单的问题，这可能有点太多了，但我宁愿彻底而不是看过去。

如果您回复

，请提前感谢您

Answer 1

您可以尝试在body onload事件中实例化控制器对象。

＆＃13;

<body onload="init()" >

＆＃13;

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

执行此操作，您将保证在运行任何脚本之前加载所有文档。

希望这会有所帮助。

Answer 2

您的控制器仅对config功能是本地的：

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

当你在HTML中引用它时，你需要一个全局变量，而不是上面的局部变量，这是不可访问的。

一个简单的解决方法是在全局对象上声明您的变量：

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

请注意，您可以使用DOMContentLoaded而不是load事件，因为第一个事件会更快发生，但仍然在解析DOM之后：

document.addEventListener("DOMContentLoaded", config);

Answer 3

我建议阅读有关scoping如何在JavaScript中运行的内容。您在controller函数中创建了config变量。此controller变量是此函数的本地变量，无法在其外部访问。

尝试从以下位置进行更改：

window.onload = config;

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

到

window.onload = config;
let controller;

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

作为旁注，通常认为更好的做法是不在HTML中设置内联事件处理程序。我建议你阅读addEventListener。一个最小的例子：

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

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

es6未捕获的ReferenceError：未定义类

3 个答案: