Javascript объект не хранит данные, поступающие с HTML - PullRequest
Новая
       23

Javascript объект не хранит данные, поступающие с HTML

0 голосов
/ 29 апреля 2020

Я даю два ввода title и status из HTML. Javascript прослушивает ввод и создает один emptyObj объект для хранения значений и затем добавляет его в список объектов objList .

Здесь происходит нечто подобное если в первый раз я даю входные данные title: "Node JS" и status: "Pending" слушатели работают нормально, и я вижу их в objList . Но в следующий раз, если я добавляю новый элемент в список, последний вход исчезает, и отображается только новый.

Входы - HTML Страница

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)

Теперь, как я могу сохранить значения, постоянно поступающие с входов?

Заранее спасибо !!!

1 Ответ

0 голосов
/ 29 апреля 2020

Поскольку вы используете два метода onchange в двух разных полях, вы всегда ошибетесь во втором изменении. как это изменит название, а затем вставьте. Вы должны использовать кнопку, чтобы обновить свой список.

Я думаю, что вы можете выполнить свое требование, добавив кнопку под двумя входами 

<button id="updateList" onclick="insertEmpty(emptyObj)">Update List</button>

и следующую функцию в DOM. js 

function insertEmpty(emptyObj)
{
    objList.push(emptyObj)
    console.log(objList);
}

удалите 

objList.push(emptyObj)  // which is currently at the end of your DOM.js
...