如何从提交事件处理程序向对象数组添加新元素

Question

你好编码器，我正在尝试制作一个简单的 javascript todo 应用程序，我已经设置了一些东西，但现在我卡在“如何从 addEventListener('submit', function(e){} 向 todos 对象数组中添加一个新元素” 为了让你了解我想要做的更多，我将这段代码留在我的待办事项应用程序下方：

//The array im working with

const todos = [{
    text: 'wake up',
    completed: true
}, {
    text: 'get some food',
    completed: true
}, {
    text: 'play csgo',
    completed: false
}, {
    text: 'play minecraft',
    completed: true
}, {
    text: 'learn javascript',
    completed: false
}];

//looping to create new p elements on the html for todos

todos.forEach(function(todo){
    let p = document.createElement('p');
    p.textContent = todo.text;
    document.querySelector('#todo').appendChild(p);
})

//the eventListener that i want to make add new .text property to the todo array inside a new object

document.querySelector('#form').addEventListener('submit', function(e){
e.preventDefault();
todos.push(e.target.elements.firstName.value)

Answer 1

由于您有一个具有“文本”和“已完成”属性的对象数组，因此您需要将具有该结构的新对象推送到您的数组中。

const newObject = {text: e.target.elements.firstName.value, completed: false};
todos.push(newObject);

或者如果你想稍微浓缩一下：

todos.push({text: e.target.elements.firstName.value, completed: false});

Answer 2

要添加的价值

let value = e.target.elements.firstName.value,
object = {'text': value, 'completed':true }; 

todos.push(object);

Answer 3

创建一个在给定参数的情况下添加任务的函数，在您的情况下如下所示：

function addTask(name, completed) {
    let p = document.createElement('p');
    p.textContent = name;
    document.querySelector('#todo').appendChild(p);
}

如果您需要更改实现，它将很好地包含在此函数中。

然后，当您需要添加新任务（在本例中是在提交处理程序中）时，您只需调用该函数：

document.querySelector('#form').addEventListener('submit', function(e) {
    var title = document.querySelector('input[type="text"]').value;
    addTask(title, false);
});

在函数中抽象您的目标会给您带来好处，例如更有条理的代码，因此作为奖励，您现在可以简化创建第一个任务的方式：

const todos = [{
    text: 'wake up',
    completed: true
}, {
    text: 'get some food',
    completed: true
}];

todos.forEach(function(todo) {
    addTask(todo.text);
})