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

Question

编码员您好，我正在尝试制作一个简单的 javascript todo 应用程序，并且已经设置了一些内容，但现在我陷入了“如何从 addEventListener('” 的对象 todos 数组中添加新元素的问题提交', 函数(e){}为了让您了解我想做的更多事情，我将此代码留在我的待办事项应用程序下面:

//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

由于您有一个包含“text”和“completed”属性的对象数组，因此您需要将具有该结构的新对象推送到数组中。

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

或者如果你想压缩一下:

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