Javascript ES6类对象在HTML中未定义

我一直在尝试使用ES6类，但遇到以下错误：

VM1534:1 Uncaught ReferenceError: toDo is not defined
    at eval (eval at onclick (index.html), <anonymous>:1:13)
    at HTMLButtonElement.onclick (index.html:35)

My index.html文件：

<div class="form-group col-md-1">
    <button class="btn btn-primary" onClick="toDo.addTaskClick()">Add</button>
</div>

添加

感谢您的帮助：）

---

提前感谢

您的变量未在全局范围内声明。如果你只是改变声明的地点

var toDo;

window.addEventListener('load',()=>{
  toDo = new ToDoClass();
});

---

一切都将按预期运行。

您应该将toDo放在全局范围内，因为您在html click中调用该函数。它将在全局范围内执行。如果将toDo函数放在window.onload中，它将在部分范围内

然而，下面是一个更好的方法，避免在html中使用事件

类ToDoClass{
构造函数（）{
警报（“你好世界”）；
此参数为0.tasks=[
{任务：“去看牙医”，isComplete:false}，
{任务：'Do Gradening'，isComplete:true}，
{任务：“续订库帐户”，isComplete:false}
];
这是loadTasks（）；
this.addEventListeners（）；
}
addTaskClick（）{
让target=docuemt.getElementById（'addTask'）；
this.addTask（target.value）；
target.value=“”；
}
添加任务（任务）{
让newTask={
任务：任务，
isComplete:错误
};
让parentDiv=document.getElementById（'addTask'）.parentElement；
如果（任务==''）{
parentDiv.classList.add（'has-error'）；
}
否则{
parentDiv.classList.remove（'has-error'）；
this.tasks.push（newTask）；
这是loadTasks（）；
}
}
}
window.addEventListener（'load'，（）=>{
var toDo=new ToDoClass（）；
var btnPrimary=document.getElementsByClassName（'btn-primary'）[0]；
btnPrimary.addEventListener（'click'，toDo.addTaskClick，false）；
});

添加
甚至更好：避免完全使用内联JS，而是将click事件侦听器绑定到元素。这里也可以使用
let
，而不必是
var
。谢谢你：D。按预期工作。可能重复的。这只是一个范围问题。它与类、ES6甚至jQuery的
$（document.ready
）无关。
var toDo;

window.addEventListener('load',()=>{
  toDo = new ToDoClass();
});