javascript - 包含数组和函数的待办事项列表

Question

我想创建一个带有数组的待办事项列表，函数和js必须与HTML分开。 HTML 部分很好，但我在完成功能时遇到了麻烦。 EventListener 也可以工作。

<小时/>

<form id="todoForm">
  <input id="todoInput" type="text">
  <button type="button" id="button">Add your To Do</button> 
</form>
<ol id="toDoList"></ol>

我们有数组“todos”，注意到按钮单击，并且调用函数“addTodo”，该函数(我希望如此)将输入推送到数组中。 我不知道如何调用 next 函数，该函数应该将数组项创建为 li 元素，这就是我需要帮助的地方。函数“printTodos”中的内容是垃圾。

 var todos = [];

    document.getElementById('button').addEventListener('click', function 
    addTodo () {
    todos.push('input')  

    function printTodos () {
        var item = document.createElement("li");
        var node = createTextNode(input);
        // I am stuck 
    }
  });

Answer 1

您已经非常接近了，只是您不想创建 addTodo和printTodos click 内的函数事件监听器。

您可以做的是在其外部定义两个函数，然后在单击事件监听器内调用它们，如下所示:

var todos = [];

function addTodo() {
    var inputValue = document.getElementById('todoInput').value;
    todos.push(inputValue);
}

function printTodos() {
    var list = document.getElementById('toDoList');
    list.innerHTML = ''; //Reset the list content whenever we print the todos, so we don't end up with duplicate todo items.

    for (var i = 0; i < todos.length; i++) {
        var li = document.createElement('li');
        var listItem = li.appendChild(document.createTextNode(todos[i]));
        list.appendChild(listItem);
    }
}

document.getElementById('click', function() {
    addTodo();
    printTodos();
});

我们在这里所做的是，在addTodo中函数中，我们以编程方式获取输入到 todoInput 中的文本并将其添加到数组中。然后，在 printTodos函数中，我们循环所有输入的待办事项并创建 <li>元素填充待办事项文本。最后，我们将新列表项附加到 toDosList .