如何通过提交事件处理程序将新元素添加到对象数组

Question

Hello coder i was trying to make a simple javascript todo app and i've already setup some stuff but now im stuck at 'how can i add a new element to the todos array of objects from the addEventListener('submit', function(e){} to make u understand what i wanna do more i leave this code down below of my todo app:

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

Since you have an array of objects with 'text' and 'completed' properties, you will need to push a new object with that structure onto your array.

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

or if you want to condense it a bit:

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

Answer 2

Value to add

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

todos.push(object);

Answer 3

Create a function that adds a task given its parameters, which in your case would look like this:

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

If you ever need to change the implementation, it will be well-contained in this function.

Then, when you need to add a new task (in this case in the submit handler), you just have to call the function:

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

Abstracting your objectives in functions gives you benefits, like a more organized code, so as a bonus, you can now simplify how you create the very first tasks:

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

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