JS Form: How do I push() into an array, without creating a new array every time I click Submit?

Question

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:

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:

<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

Possible duplicate of [Define global variable in a JavaScript function](https://stackoverflow.com/questions/5786851/define-global-variable-in-a-javascript-function) — Erik Philips, Jul 27 '19 at 06:02

score 3 · Answer 1 · answered Jul 27 '19 at 06:27

Everytime the form is submitted, the submit event fires up and the handler function is executed. Since, you are initializing a new stories array inside your function, every time the form is submitted, a new stories array is created. 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.

const form = document.querySelector('#form')
let stories= [];
form.addEventListener('submit', (e) => {...}

score 0 · Accepted Answer · answered Jul 27 '19 at 06:49

First declare the array outside the submit handler. Secondly if you want to append it to the dom you can avoid the array and iterating it. 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>

score 0 · Answer 3 · answered Jul 27 '19 at 07:02

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.

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));
});

JS Form: How do I push() into an array, without creating a new array every time I click Submit?

3 Answers3