时间戳

首页 > 解决方案 > JS 表单：如何将（） push() 放入一个数组中，而不是每次单击提交时都创建一个新数组？

javascript - JS 表单：如何将（） push() 放入一个数组中，而不是每次单击提交时都创建一个新数组？

问题描述

每次我单击提交时，它都会创建一个带有对象的新数组

数组应该接收不断接收的对象而不是创建一个新的

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>

有人能告诉我我应该在这里做什么吗？

每次单击提交时，我都需要将对象添加到同一个数组中

标签： javascriptarrays

解决方案

每次提交表单时，都会submit触发事件并执行处理函数。因为，您正在函数内部初始化一个新stories数组，所以每次提交表单时，都会stories创建一个新数组。您可能希望将stories数组声明移出函数，以便将新帖子添加到现有stories数组中。

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

推荐阅读