极客观点
项目管理
HarmonyOS
我会尽量保持简短。
我的问题是典型的初学者问题。基本上，我试图在我的索引中使用一个按钮来实现 onClick="function();" 。每次单击所述按钮时，我都会得到一个 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>
无论我写 onClick="class.function();" 还是简单地写 --- onClick="function();" ，它都行不通。当我尝试前一个选项时，它告诉我类未定义。当我尝试后一个选项时，它告诉我函数未定义。
问过几个同学，都说不出来。有人让它可以使用您在旧 JavaScript 中使用的语法，但这不是我的目标。
我一般都尝试过 Stachoverflow 和谷歌，但没有找到任何帮助，或者说这是可以理解的。我没有使用 Jquery 或任何插件。只是 html、css 和 JavaScript。
感谢阅读。也许对于这样一个简单的问题来说有点太多了，但我宁愿彻底而不是仔细检查。
如果您回复，请提前致谢
原文由 a.anev 发布，翻译遵循 CC BY-SA 4.0 许可协议
我建议阅读 JavaScript 中作用域的工作原理。您在
config函数中创建了controller变量。这个controller变量是这个函数的本地变量，不能在它之外访问。尝试将其更改为：
至
作为旁注，通常认为最好不要在 HTML 中设置内联事件处理程序。我建议阅读
addEventListener。一个最小的例子：