Pushing an Object to an empty array in Javascript not working

Question

Trying to create a bookmark app in Javascript. I created a bookmark object and an empty array "bookmarks" to store the website name and website url. However clicking on the submit doesn't populate the bookmark array. It replaces the initial value with the new value in the input form

document.getElementById('subButton').addEventListener('click',getFormInput)

function getFormInput(e){

    e.preventDefault();
    //get input values
    var nameInput = document.getElementById('name').value;
    var urlInput = document.getElementById('url').value;

    
//create a bookmark object
var bookmark = {
    name: nameInput,
    url: urlInput
}
// store bookmark in bookmarks array
var bookmarks = [];
bookmarks.push(bookmark);
console.log(bookmarks)
}

body{
    background: #EFEFEF
}
.content{
    margin: auto;
    margin-top: 70px;
    width: 600px;
    text-align: center;
    box-sizing: border-box;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
        fill: rgba(255,255,255,1);
        background: #fff;
    padding-top: 30px;
    padding-bottom: 30px;
}

input{
    border-radius: 3px;
}


input[type="text"]{
    color: red;
    margin-top: 10px;
    padding: 10px;
    display: block;
    border: none;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
    fill: rgba(255,255,255,1);
    background: #fff;
    width: 50%;
    margin:  auto;
}

#subButton{
    width: 30%;
    padding: 10px;
    margin:  auto;
    margin-top: 30px;
    text-align: center;
    border: none;
}

.blue{
    background-color: #3D78FF;
    color: #fff;
}

    <div class="content">
        <h1>Website Bookmarker</h1>
        <form id="form1">
            <label for="">Name: </label> 
            <input type="text" name="" id="name" placeholder="Website">
           <br>
            <label for="">Url: </label><input type="text" name="" id="url" placeholder="Website url">
        <button class="blue" id="subButton" type="button">Submit</button>
            
        </form>

        <div id="displayResult">

        </div>
    </div>

Find above what I have tried.

Answer 1

The bookmarks array is scoped into the function so it will be reset at each time

declare it outside the getFormInput function

document.getElementById('subButton').addEventListener('click',getFormInput)

var bookmarks = [];

function getFormInput(e){

    e.preventDefault();
    //get input values
    var nameInput = document.getElementById('name').value;
    var urlInput = document.getElementById('url').value;


//create a bookmark object
var bookmark = {
    name: nameInput,
    url: urlInput
}
// store bookmark in bookmarks array
bookmarks.push(bookmark);
console.log(bookmarks)
}