为何输入框值无法显示在动态HTML表格中？

我正在使用JavaScript制作一个可添加名字和姓氏的动态HTML表格，但点击提交按钮时，表格会创建无输入值的空单元格。

原HTML代码 #

<input type="text" id="name" placeholder="First Name">
<input type="text" id="lastname" placeholder="Last Name">
<input type="button" id ="submit" value="Submit" >

<table border="1" id="table">
    <tr>
    <th>First Name</th>
    <th>Last Name</th>
    </tr>
</table>

原JavaScript代码 #

let name = document.getElementById("name").value;
let lastname = document.getElementById("lastname").value;
let submit = document.getElementById("submit");
let table = document.getElementById("table");

var rowNum = 1;

submit.addEventListener("click" , function(){
  var row = table.insertRow(rowNum);
  var cell0 = row.insertCell(0);
  var cell1 = row.insertCell(1);
  cell0.innerHTML = name;
  cell1.innerHTML = lastname;
  rowNum++;
});

问题原因 #

页面加载完成后你立即获取了输入框的value，此时输入框还没有任何内容，所以name和lastname的值是空字符串。之后点击提交按钮时，一直使用的是这个初始空值，没有重新读取输入框的最新内容。

修正后的JavaScript代码 #

let submit = document.getElementById("submit");
let table = document.getElementById("table");

var rowNum = 1;

submit.addEventListener("click" , function(){
  // 在点击事件内获取输入框的当前值
  let name = document.getElementById("name").value;
  let lastname = document.getElementById("lastname").value;
  
  var row = table.insertRow(rowNum);
  var cell0 = row.insertCell(0);
  var cell1 = row.insertCell(1);
  cell0.innerHTML = name;
  cell1.innerHTML = lastname;
  rowNum++;
  
  // 可选：清空输入框，方便下次输入
  document.getElementById("name").value = "";
  document.getElementById("lastname").value = "";
});

说明 #

将获取输入框值的代码移到点击事件的回调函数内部，每次点击提交按钮时都会重新读取输入框的当前内容，就能正确将输入的姓名添加到表格中。额外添加的清空输入框代码，能提升后续输入的用户体验。

内容的提问来源于stack exchange，提问作者mu9u1t