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

Question

好的，这是代码，但不知何故，在提交表单后，我到处都得到空值。请在这里帮忙。当我尝试在表单中输入一些信息时，它显示所有值均为空，我该如何解决这个问题？我尝试移动脚本或将其放入 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>

这是js文件

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);
});

Answer 1

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

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
}