Javascript对象不存储来自HTML的数据

我正在从HTML提供两个输入title和status。 Javascript正在侦听输入，并创建一个emptyObj对象以存储值，然后将其附加到对象objList的列表中。

这里发生了一些事情，例如，当我第一次输入title：“ Node JS”]和status：“ Pending”时，侦听器运行正常，我可以在objList]中看到它们>。但是下一次，如果我将新项目追加到列表中，则最后输入消失，仅显示新项目。

输入-HTML Page

HTMML代码-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title, #status{
            display: block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="divFirst">

    </div>
    <button>You are seeing the pending tasks, please click the button to see completed!</button>
    <input type="text" id="title" placeholder="Please enter the title of the task">
    <input type="text" id="status" placeholder="Please enter the status of the task">
    <script src="DOM.js"></script>
</body>
</html>

javascript代码-
let objList = [{
    title: "HTML",
    status: "Completed"
},{
    title: "CSS",
    status: "Completed"
},{
    title: "Javascript",
    status: "Pending"
},{
    title: "React Js",
    status: "Pending"
},{
    title: "Mongo DB",
    status: "Pending"
}]
    let emptyObj = {
        title: "",
        status: ""
    }
    document.querySelector('#title').addEventListener('change',function(e){
        emptyObj.title = e.target.value
        console.log(e.target.value)
    })
    document.querySelector('#status').addEventListener('change',function(e){
        emptyObj.status = e.target.value
        console.log(e.target.value)
    })

    objList.push(emptyObj)

现在，我如何永久存储来自输入的值？

提前感谢！！

我从HTML提供了两个输入标题和状态。 Javascript正在侦听输入，并创建一个emptyObj对象来存储值，然后将其附加到对象列表objList中。这里...

回答如下：

当您在两个不同的字段上使用两种onchange方法时，总是会错误地进行第二次更改。因为它将更改标题，然后插入。您应该使用按钮来更新列表。

Javascript对象不存储来自HTML的数据

我正在从HTML提供两个输入title和status。 Javascript正在侦听输入，并创建一个emptyObj对象以存储值，然后将其附加到对象objList的列表中。

这里发生了一些事情，例如，当我第一次输入title：“ Node JS”]和status：“ Pending”时，侦听器运行正常，我可以在objList]中看到它们>。但是下一次，如果我将新项目追加到列表中，则最后输入消失，仅显示新项目。

输入-HTML Page

HTMML代码-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title, #status{
            display: block;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="divFirst">

    </div>
    <button>You are seeing the pending tasks, please click the button to see completed!</button>
    <input type="text" id="title" placeholder="Please enter the title of the task">
    <input type="text" id="status" placeholder="Please enter the status of the task">
    <script src="DOM.js"></script>
</body>
</html>

javascript代码-
let objList = [{
    title: "HTML",
    status: "Completed"
},{
    title: "CSS",
    status: "Completed"
},{
    title: "Javascript",
    status: "Pending"
},{
    title: "React Js",
    status: "Pending"
},{
    title: "Mongo DB",
    status: "Pending"
}]
    let emptyObj = {
        title: "",
        status: ""
    }
    document.querySelector('#title').addEventListener('change',function(e){
        emptyObj.title = e.target.value
        console.log(e.target.value)
    })
    document.querySelector('#status').addEventListener('change',function(e){
        emptyObj.status = e.target.value
        console.log(e.target.value)
    })

    objList.push(emptyObj)

现在，我如何永久存储来自输入的值？

提前感谢！！

我从HTML提供了两个输入标题和状态。 Javascript正在侦听输入，并创建一个emptyObj对象来存储值，然后将其附加到对象列表objList中。这里...

回答如下：

当您在两个不同的字段上使用两种onchange方法时，总是会错误地进行第二次更改。因为它将更改标题，然后插入。您应该使用按钮来更新列表。