如何从提交事件处理程序向对象数组添加新元素
How to add new elements to the objects array from the submit event handler
你好编码器我正在尝试制作一个简单的 javascript 待办事项应用程序并且我已经设置了一些东西但现在我卡在'我如何向待办事项对象数组中添加新元素来自addEventListener('submit', function(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)
由于您有一个具有 '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});
要添加的值
let value = e.target.elements.firstName.value,
object = {'text': value, 'completed':true };
todos.push(object);
创建一个函数,在给定参数的情况下添加一个任务,在您的情况下,它看起来像这样:
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);
})
你好编码器我正在尝试制作一个简单的 javascript 待办事项应用程序并且我已经设置了一些东西但现在我卡在'我如何向待办事项对象数组中添加新元素来自addEventListener('submit', function(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)
由于您有一个具有 '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});
要添加的值
let value = e.target.elements.firstName.value,
object = {'text': value, 'completed':true };
todos.push(object);
创建一个函数,在给定参数的情况下添加一个任务,在您的情况下,它看起来像这样:
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);
})