javascript - 如何将任务添加到当前方法？(How to add task to current method?)

Question

I am trying to do a web app similar to google calendar.

(我正在尝试做一个类似于Google日历的网络应用。)

I have done the object and methods within it but now it's time to be able to add what I want as a task.

(我已经完成了其中的对象和方法，但是现在是时候可以添加我想要的任务了。)

My idea is for the user to add something to the input and that input being console.logged for now.

(我的想法是让用户向输入中添加一些内容，并且此输入现在为console.logged。)

Any idea?

(任何的想法？)

HTML

(的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

(Java脚本)

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)

As you can see with console.log above the array index [0] is logged as undefined but I wanted the user to write in the input " Go to the gym" and this to be logged within the array.

(如在console.log上面看到的那样，数组索引[0]被记录为未定义，但我希望用户在输入中输入“ Go to the Gym”，并将其记录在数组中。)

Thanks

(谢谢)

  ask by Rpx translate from so

Answer 1

Some issues:

(一些问题：)

1. You are not assigning the click handler.

   (您没有分配点击处理程序。)

   Instead you execute it immediately (not on click).

   (而是您立即执行它（而不是单击）。)

2. When you call .add() you don't provide an argument: the name of the task

   (调用.add()时，不提供参数：任务名称)

3. The click handler should be on the button element, not on the div that has the input element.

   (点击处理程序应位于button元素上，而不应位于具有input元素的div上。)

   And so it will be useful to give that button an id attribute.

   (因此，为该按钮提供id属性将很有用。)

4. You should retrieve the value from the input element, and so it would be more appropriate to give that element an id and not so much the div that wraps it.

   (您应该从input元素中检索值，因此为该元素提供一个id而不是为其包装的div更为合适。)

5. The console.log at the end of your script is executed immediately.

   (脚本末尾的console.log将立即执行。)

   It should be done only when the user has clicked the button.

   (仅当用户单击按钮时，才应执行此操作。)

Snippet with some corrections (also in the HTML!):

(带有一些更正的代码段（也在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>