Javascript Add Values to an Array of Objects

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Management</title>
    <script>
        // JavaScript code
        let arrayOfObjects = [
            { name: 'Warner', age: 40 },
            { name: 'Root', age: 36 }
        ];

function addObject() {
            const nameValue = document.getElementById('key1').value;
            const ageValue = document.getElementById('key2').value;
             const newObject = { name: nameValue, age: ageValue };
             const isDuplicate = arrayOfObjects.some(obj => {
                return obj.name === newObject.name && obj.age === newObject.age;
            });
            if (!isDuplicate) {
                arrayOfObjects = [
                    ...arrayOfObjects,
                    newObject
                ];

updateDisplay();
            } else {
            alert('Duplicate object not added:', newObject);
            }
        }

function updateDisplay() {
            const displayArea = document.getElementById('displayArea');
            displayArea.innerHTML = ''; // Clear previous content

arrayOfObjects.forEach(obj => {
                const div = document.createElement('div');
                div.textContent = JSON.stringify(obj);
                displayArea.appendChild(div);
            });
        }
    </script>
</head>

<body>
    <h2>Add Element to Object</h2>
    <label for="key1">Name:</label>
    <input type="text" id="key1">
    <label for="key2">Age:</label>
    <input type="text" id="key2">
    <button onclick="addObject()">Add Object</button>

<h2>Objects</h2>
    <div id="displayArea"></div>
</body>

</html>