title: Pushing an Object to an empty array in Javascript not working
body: <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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)
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="content"&gt;
          &lt;h1&gt;Website Bookmarker&lt;/h1&gt;
          &lt;form id="form1"&gt;
              &lt;label for=""&gt;Name: &lt;/label&gt; 
              &lt;input type="text" name="" id="name" placeholder="Website"&gt;
             &lt;br&gt;
              &lt;label for=""&gt;Url: &lt;/label&gt;&lt;input type="text" name="" id="url" placeholder="Website url"&gt;
          &lt;button class="blue" id="subButton" type="button"&gt;Submit&lt;/button&gt;
              
          &lt;/form&gt;
  
          &lt;div id="displayResult"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  Find above what I have tried.</p>