Edit array object

emilo Post Leave a Comment

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <button onclick="addItem()">Add</button>
    <div id="content"></div>
    <div id="edit"></div>
    <script>
        var array = [];
        function addItem(i) {
            var obj = { Name: "Fred" };
            array.push(obj);
            showItems();
        }
        function showItems() {
            var html = "";
            for (var i = 0; i < array.length; i++) {
                let obj = array[i];
                html += `<div>
                         <span>${obj.Name}</span>
                         <span>${i}</span>
                         <button onclick="editItem(${i})">EDIT</button>
                         <button onclick="deleteItem(${i})">DELETE</button>
                         </div>`;
            }
            document.getElementById('content').innerHTML = html;
        }
        function deleteItem(i) {
            array.splice(i, 1);
            showItems();
        }
        function editItem(i) {
            let obj = array[i];
            document.getElementById('edit').innerHTML = `
            <input id="name" type="text" value="${obj.Name}"></input>
            <button onclick="saveItem(${i})">Save</button>
`;
        }

        function saveItem(i) {
            let obj = array[i];
            obj.Name = document.getElementById('name').value;
            showItems()
            document.getElementById('edit').innerHTML = ``;
        }
    </script>
</body>
</html>