Не могу получить тег ввода текста DOM по DOM

Question

Я новичок в JavaScript и мне интересно получить текст из двух полей. после того, как пользователь нажмет подтвердить. печать текстов в разделе результатов. Это не работает, как я ожидал. После подтверждения вы должны обновить страницу один раз, во второй раз она работает!

var personalInfo = {
  firsName: document.getElementById("name").value,
  familyName: document.getElementById("family").value,
  confirm: function confirm() {
    document.getElementById("show-name").innerHTML = personalInfo.firsName;
    document.getElementById("show-family").innerHTML = personalInfo.familyName;
  }
}

<div> Basic Information</div>
<table>
  <tr>
    <td>First Name</td>
    <td><input type="text" id="name"></td>
    <td>Family Name</td>
    <td><input type="text" id="family"></td>
  </tr>
</table>
<button type="button" onclick="personalInfo.confirm()">Confirm</button>
<br><br><br><br><br><br><br><br><br>
<hr>
<div> Result!</div>
<table>
  <tr>
    <td>Name & Family name:</td>
    <td><span id="show-name"></span> <span id="show-family"></span></td>
  </tr>
</table>

Answer 1

В вашем текущем коде personalInfo.firstName и personalInfo.familyName установлены на значения элементов DOM при объявлении переменной personalInfo.Их следует заменить функциями, получающими значения элементов DOM при нажатии кнопки (при запуске personalInfo.confirm()):

var personalInfo = {
  firstName: function () {return document.getElementById("name").value},
  familyName: function () {return document.getElementById("family").value},
  confirm: function() {
    document.getElementById("show-name").innerHTML = personalInfo.firstName();
    document.getElementById("show-family").innerHTML = personalInfo.familyName();
  }
}

<div> Basic Information</div>
<table>
  <tr>
    <td>First Name</td>
    <td><input type="text" id="name"></td>
    <td>Family Name</td>
    <td><input type="text" id="family"></td>
  </tr>
</table>
<button type="button" onclick="personalInfo.confirm()">Confirm</button>
<br>
<hr>
<h3> Result:</h3>
<div>Name: <span id="show-name"></span></div>
<div>Family name: <span id="show-family"></span></div>