将表单字段数据推送到本地存储的数组时为空值 (javascript)答案

【问题标题】：Empty value when pushing form field data into a locally stored array (javascript)将表单字段数据推送到本地存储的数组时为空值 (javascript)
【发布时间】：2022-12-29 21:29:00
【问题描述】：

我有一个连接到本地存储的空数组。我想在提交表单时将表单字段中的数据推送到数组中。它识别出我在控制台中推送数据，因为它将数组值记录为 [] 然后是“”，一旦我单击提交按钮而不是从表单字段输入的文本

        <form id="player-name-form">
            <input
            class="input"
            type="text"
            placeholder="player 1"
            id="player1"
            required
            maxlength="50"
            >
            <button id="confirm-player-1" type="submit" onclick="formBtnClick()" >confirm player 1</button>
        </form>

// Setting player names to local storage
let playerNames = [];
let form = document.getElementById('player-name-form');
let formBtn = document.getElementById('confirm-player-1');
this.name = form.player1.value;
localStorage.setItem("playerNames", JSON.stringify(playerNames));

// Adding form input to local storage
function formBtnClick () {
 event.preventDefault()
localStorage.setItem("playerNames", JSON.stringify(this.name));
}

我希望表单生成的“this.name”值登录到本地存储的数组

先感谢您！

【问题讨论】：

在表单上使用 onsubmit 而不是在按钮上使用 onclick
您永远不会将任何项目推送到数组
this.name 在输入字段内有任何值之前在开头设置一次，然后将该空值推送到本地存储

标签： javascript html arrays forms

【解决方案1】：

你可以写这个脚本

export function formBtnClick() {
    let form = document.getElementById('player-name-form');
    const name = form.player1.value;
    const prevValue = JSON.parse(localStorage.getItem("playerNames"));
    const names = [...prevValue, name];
    localStorage.setItem("playerNames", JSON.stringify(names));
    form.player1.value = '';
}

export function setEmptyArray() {
    let playerNames = [];
    localStorage.setItem("playerNames", JSON.stringify(playerNames));
}

const initialValue = localStorage.getItem("playerNames");
if(!initialValue) {
    setEmptyArray();
}

和以下html

<button onclick="setEmptyArray()">SET empty array as names</button>
<form id="player-name-form" >
    <input
            name="player1"
            class="input"
            type="text"
            placeholder="player 1"
            id="player1"
            required
            maxlength="50"
    >
    <button id="confirm-player-1" onclick="formBtnClick()" type="button">confirm player 1</button>
</form>

变更清单：

输入添加的属性“名称”以轻松获取此输入
类型从提交更改为按钮以防止页面重新加载
登录拆分为设置和重置本地存储值

【讨论】：