javascript - 如何将任务添加到当前方法？

Question

我正在尝试做一个类似于谷歌日历的网络应用程序。我已经完成了其中的对象和方法，但现在是时候能够添加我想要的任务了。我的想法是让用户向输入添加一些内容，并且该输入现在是 console.logged。

有什么想法吗？

HTML

<div class="new-task" id="task-input">
    <div id="add-new-task">Task: <input type="text"></div>
    <div id="add-time">Time: <input type="text"></div>
    <button class ="save-task" onclick="">Save task</button>
</div>

Javascript

var idCounter = 0
var tasksManager = {
    array: [],
    add: function(task){

        taskObject = {
            title: task,
            idVerification: idCounter ++
        }
        tasksManager.array.push(taskObject)
    },
    show:function(id){
        var i;
        for (i = 0; i < tasksManager.array.length; i++) {
           if(id === tasksManager.array[i].idVerification){
            return tasksManager.array[i]
           }
        }
    },
    delete:function(task){
       if(this.show){
       tasksManager.array.splice(task)
       }
    }

}

var newTask = document.getElementById("add-new-task")
newTask.addEventListener('click',tasksManager.add())

console.log(tasksManager.array)

正如您在上面的 console.log 中看到的，数组索引 [0] 被记录为未定义，但我希望用户在输入中写入“去健身房”，并将其记录在数组中。

谢谢

Answer 1

一些问题:

1. 您没有分配点击处理程序。相反，您立即执行它(而不是单击时)。

2. 当您调用 .add() 时，您不提供参数:任务名称

3. 点击处理程序应位于按钮元素上，而不是位于具有 input 元素的 div 上。因此，为该按钮提供 id 属性会很有用。

4. 您应该从 input 元素中检索值，因此为 that 元素提供一个 id 会更合适而不是包装它的 div。

5. 脚本末尾的 console.log 会立即执行。仅当用户单击按钮时才应执行此操作。

带有一些更正的代码片段(也在 HTML 中!):

var idCounter = 0
var tasksManager = {
    array: [],
    add: function(task){

        let taskObject = {
            title: task,
            idVerification: idCounter ++
        }
        tasksManager.array.push(taskObject)
    },
    show:function(id){
        var i;
        for (i = 0; i < tasksManager.array.length; i++) {
           if(id === tasksManager.array[i].idVerification){
            return tasksManager.array[i]
           }
        }
    },
    delete:function(task){
       if(this.show){
       tasksManager.array.splice(task)
       }
    }

}

var button = document.getElementById("save-task"); // <-- the button
var input = document.getElementById("add-new-task"); // <-- the input (move the ID attribute to the input!)
button.addEventListener('click', () => {
    tasksManager.add(input.value);
    console.log(tasksManager.array)
})

<div class="new-task" id="task-input">
    <div >Task: <input id="add-new-task" type="text"></div>
    <div id="add-time">Time: <input type="text"></div>
    <button class ="save-task" id ="save-task" onclick="">Save task</button>
</div>