how to add user data javascript – Blancer.com Tutorials and projects

I am having trouble being able to add user input data. I can get it working when I add in the data myself all the users show up in the console in the array. For people 1-3 I would like them to enter their name and favorite color but I can’t seem to be able to store it or at least have it come up in the console. I did remove person 2 and 3 from the array so I can test it easier and quicker. if you were to take the

    user: document.getElementById('name').value,
    color: document.getElementById('color').value,

and all the comments it would work and show up in console how i want it to but cant seem to do user data. Sorry if this is confusing i am a new to javascript.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form>
        <div class="formBox">
            <label for="name">Name</label>
            <input type="text" id="name" placeholder="Name"/>
        </div>


        <div class="formBox">
            <label for="color">Favorite color</label>
            <input type="text" id="color" placeholder="Color"/>
        </div>

        <div class="formBox">
            <button id="btn">Click to Add</button>
        </div>
        <div id="msg">
            <pre></pre>
        </div>
    </form>
    

    <script >


const person1 = {
    user: document.getElementById('name').value,
    color: document.getElementById('color').value,

   /* user: "Sarah",
    color: "Yellow",*/
  };


  /* const person2 = {
    user: "Aaron",
    color: "Yellow"
  };
  
  const person3 = {
    user: "Sarah",
    color: "Green",
  };
  */
  array = [person1]
  
  sort = array.sort(function(a, b){
      if(a.user < b.user) { return -1; }
      if(a.user > b.user) { return 1; }
      return 0;
  })
  
  console.log(sort)



    </script>
</body>
</html>