Question

我一直在尝试使用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)

我所做的就是点击Add按钮，上面的错误显示在我的控制台中，没有任何反应:(。

我的script.js：

class ToDoClass {
    constructor(){
        alert('Hello World');
        this.tasks = [
            {task : 'Go To Dentist' , isComplete : false},
            {task : 'Do Gradening' , isComplete : true},
            {task : 'Renew Library Account' , isComplete : false}
        ];
        this.loadTasks();
        this.addEventListeners();
    }
    addTaskClick(){
        let target = docuemt.getElementById('addTask');
        this.addTask(target.value);
        target.value= "";
    }

    addTask(task){
        let newTask = {
            task : task,
            isComplete : false
        };

        let parentDiv = document.getElementById('addTask').parentElement;
        if(task === ''){
            parentDiv.classList.add('has-error');
        }
        else{
            parentDiv.classList.remove('has-error');
            this.tasks.push(newTask);
            this.loadTasks();
        }
    }
}

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

我的index.html文件：

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

感谢任何帮助:)。

提前致谢

Answer 1

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

var toDo;

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

一切都会按预期工作。

Answer 2

你应该把你的toDo放在全局，因为你在html click.it中调用函数在全局范围内执行。如果你把toDo函数放在window.onload.it中是在部分范围内。

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

＆＃13;

    class ToDoClass {
        constructor(){
            alert('Hello World');
            this.tasks = [
                {task : 'Go To Dentist' , isComplete : false},
                {task : 'Do Gradening' , isComplete : true},
                {task : 'Renew Library Account' , isComplete : false}
            ];
            this.loadTasks();
            this.addEventListeners();
        }
        addTaskClick(){
            let target = docuemt.getElementById('addTask');
            this.addTask(target.value);
            target.value= "";
        }

        addTask(task){
            let newTask = {
                task : task,
                isComplete : false
            };

            let parentDiv = document.getElementById('addTask').parentElement;
            if(task === ''){
                parentDiv.classList.add('has-error');
            }
            else{
                parentDiv.classList.remove('has-error');
                this.tasks.push(newTask);
                this.loadTasks();
            }
        }
    }
    
    window.addEventListener('load',()=>{
       var toDo = new ToDoClass();
       var btnPrimary=document.getElementsByClassName('btn-primary')[0];
btnPrimary.addEventListener('click',toDo.addTaskClick , false);
    });

＆＃13;

    <div class="form-group col-md-1">
        <button class="btn btn-primary">Add</button>
      </div>

＆＃13;

ES6中的ES6类对象未定义

2 个答案: