JS表单：如何在每次单击“提交”时不将新的数组推入数组而将推入到数组中？
[英]JS Form: How do I push() into an array, without creating a new array every time I click Submit?
问题描述
Every time I click Submit, its creating a new array with an object 
每次我单击“提交”，它都会使用对象创建一个新数组
Array should receive keep receiving objects and not create a new one 数组应该接收不断接收的对象，而不要创建一个新的对象
JS: JS：
const form = document.querySelector('#form')
form.addEventListener('submit', (e) => {
e.preventDefault()
const title = document.querySelector('#title').value
const img = document.querySelector('#img').value
const story = document.querySelector('#story').value
const author = document.querySelector('#author').value
const eachStory = {
myTitle : title,
myImg : img,
myStory : story,
myAuthor : author
}
let stories = []
stories.push(eachStory)
stories.forEach((story) => {
root.innerHTML +=
`
${eachStory.myTitle}
${eachStory.myStory}
${eachStory.myImg}
${eachStory.myAuthor}
`
})
console.log(stories)
})
HTML: HTML：
<body>
<div>
<form id="form">
<input type="text" id="title" >
<input type="text" id="img" >
<input type="text" id="story" >
<input type="text" id="author" >
<button>SUBMIT</button>
</form>
<div id="root"></div>
</div>
Can someone tell me what I should do here? 有人可以告诉我该怎么办吗？
I need to add objects to the same array every time i click submit 每次单击提交时，我需要将对象添加到同一数组中
3 个解决方案
解决方案1
3 2019-07-27 06:27:00
Everytime the form is submitted, the submit event fires up and the handler function is executed. 每次提交表单时，都会触发submit事件并执行处理程序函数。 Since, you are initializing a new stories array inside your function, every time the form is submitted, a new stories array is created. 由于要在函数内部初始化一个新的stories数组，因此每次提交表单时，都会创建一个新的stories数组。 You might want to move your stories array declaration out of the function, so that new posts are added to the existing the stories array. 您可能希望将stories数组声明移出函数，以便将新帖子添加到现有的stories数组中。
const form = document.querySelector('#form')
let stories= [];
form.addEventListener('submit', (e) => {...}
解决方案2
0 已采纳 2019-07-27 06:49:48
First declare the array outside the submit handler. 首先在submit处理程序外部声明数组。 Secondly if you want to append it to the dom you can avoid the array and iterating it. 其次，如果要将其附加到dom，则可以避免数组并对其进行迭代。 Also iterating over the array may create duplication over row 同样在数组上迭代可能会在行上创建重复项
const form = document.querySelector('#form') let stories = [] form.addEventListener('submit', (e) => { e.preventDefault() const title = document.querySelector('#title').value; const img = document.querySelector('#img').value; const story = document.querySelector('#story').value; const author = document.querySelector('#author').value; root.innerHTML += `<div> ${title} ${img} ${story} ${author}</div> `; stories.push({ myTitle: title, myImg: img, myStory: story, myAuthor: author }) })
<div> <form id="form"> <input type="text" id="title"> <input type="text" id="img"> <input type="text" id="story"> <input type="text" id="author"> <button>SUBMIT</button> </form> <div id="root"></div> </div>
解决方案3
0 2019-07-27 07:02:54
On Submit click it will create new Object and add in array.And next/every click it will add only object in existing array and not will remove the existing Object. 在Submit上单击将创建一个新对象并添加到数组中，然后单击/每次单击将仅在现有数组中添加一个对象而不删除现有对象。
const form = document.querySelector("#form");
let stories = [];
form.addEventListener("submit", e => {
e.preventDefault();
const title = document.querySelector("#title").value;
const img = document.querySelector("#img").value;
const story = document.querySelector("#story").value;
const author = document.querySelector("#author").value;
var storyObj = {};
storyObj["myTitle"] = title;
storyObj["myImg"] = img;
storyObj["myStory"] = story;
storyObj["myAuthor"] = author;
stories.push(storyObj);
stories.forEach(story => {
root.innerHTML += `
${story.myTitle}
${story.myStory}
${story.myImg}
${story.myAuthor}
`;
});
console.log("Create data value==>+", JSON.stringify(stories));
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.