Javascript document.getElementById不记录我在表单中输入的值-返回null

好的，这是代码，但在我提交表单后，不知何故，到处都是空值。请帮忙。当我尝试在表单中输入一些信息时，它显示所有的值都是空的，我如何修复这个问题？我试着移动脚本或将其放入html中，但没有帮助

<form class="container jumbotron">
    <div class="form-row">
      <div class="col-md-4 mb-3">
        <label for="FirstName">First Name</label>
        <input type="text" class="form-control" id="FirstName" name="name" required>
      </div>
      <div class="col-md-4 mb-3">
        <label for="LastName">Last Name</label>
        <input type="text" class="form-control" id="LastName" required>
      </div>
      <div class="col-md-2 mb-3">
          <label for="Age">Age</label>
          <input type="number" class="form-control" id="Age" required>
      </div>
      <div class="col-md-2 mb-3">
        <label for="Sex">Sex</label>
        <select class="custom-select" id="Sex" required>
          <option selected disabled value="">Select gender</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </div>
</div>
    <div class="form-row">
        <div class="col-md-3 mb-3">
            <label for="City">Address</label>
            <input type="text" class="form-control" id="Address" required>
          </div>
          <div class="col-md-3 mb-3">
            <label for="PhoneNumber">Phone Number</label>
            <input type="tel" class="form-control" pattern="^\d{3}\d{3}\d{3}$" id="PhoneNumber" required>
          </div>
        <div class="col-md-3 mb-3">
            <label for="Email">Email</label>
            <input type="email" class="form-control" id="Email" name="email" required>
          </div>
        <div class="col-md-3 mb-3">
            <label for="Email">Secondary Email</label>
            <input type="email" class="form-control" id="SecondaryEmail">
          </div>
    </div>
    <div class="form-row">
    <div class="col-md-3 mb-3">
        <label for="date">Birthday</label><br>
        <input type="date" id="Birthday" class="form-control" name="datemax" min="1900-01-01" max="2020-01-01" required>           
      </div>
    </div>

    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="checkbox" required>
        <label class="form-check-label" for="checkbox">
          I agree to terms and conditions
        </label>
      </div>
    </div>
    <button class="btn btn-primary" type="submit" id="submit">Add new contact</button>       
  </form>

---

要从表单字段中获取值，必须使用value而不是nodeValue

---

还有一个问题：在提交表单并存储表单后，是否有方法将表单的引用发送到按钮链接，该链接将在单击表单后显示表单中的值。我知道它与button.onclick有关，但我不确定该放在哪里以及如何调用它。谢谢您的帮助。请尝试document.getElementById'FirstName'。value而不是nodeValue

let list1 = [];
const addlist1 = (event)=>{
event.preventDefault();
let list12 = {
id: Date.now(),
FirstName: document.getElementById('FirstName').nodeValue,
LastName: document.getElementById('LastName').nodeValue,
Age: document.getElementById('Age').nodeValue,
Sex: document.getElementById('Sex').nodeValue,
Address: document.getElementById('Address').nodeValue,
PhoneNumber: document.getElementById('PhoneNumber').nodeValue,
Email: document.getElementById('Email').nodeValue,
SecondaryEmail: document.getElementById('SecondaryEmail').nodeValue,
//Birthday: document.getElementById('Birthday').nodeValue

 }
list1.push(list12);
document.forms[0].reset();

localStorage.setItem('clients', JSON.stringify(list1)); 
}
document.addEventListener('DOMContentLoaded' , ()=> {
document.getElementById('submit').addEventListener('click', addlist1);
});

let list12 = {
    id: Date.now(),
    FirstName: document.getElementById('FirstName').value,
    LastName: document.getElementById('LastName').value,
    Age: document.getElementById('Age').value,
    Sex: document.getElementById('Sex').value,
    Address: document.getElementById('Address').value,
    PhoneNumber: document.getElementById('PhoneNumber').value,
    Email: document.getElementById('Email').value,
    SecondaryEmail: document.getElementById('SecondaryEmail').value,
    //Birthday: document.getElementById('Birthday').value
}