为什么我将用户输入添加至HTML表格单元格时显示为空或undefined？

• 输入框取值属性错误：<input> 元素的用户输入内容存储在 value 属性中，你使用的 innerHTML 用于获取元素内部的HTML子内容，input 是闭合单标签，内部没有嵌套内容，所以取值永远为空。
• 取值时机错误：你在页面加载时就提前获取了三个输入框的值，此时用户还未进行任何输入，拿到的是初始空值；应该在每次点击添加按钮、准备生成新行的时候再读取最新的输入内容。
• 重复绑定点击事件：你同时用 addEventListener 和 onclick 给同一个按钮绑定了两次点击事件，逻辑冗余且可能引发后续冲突，建议合并。

let create = document.getElementById("ajouterDepense");
let liste = document.getElementById("listeDepense");

function nouvelleLigne(){
    // 每次生成新行时读取最新的输入值，使用value属性
    let dep = document.getElementById('denom').value;
    let dat = document.getElementById('choixDate').value;
    let mont = document.getElementById("montant").value;
          
    var newline = liste.insertRow();
    var newCell = newline.insertCell();
    var newText = document.createTextNode(dep)
    newCell.appendChild(newText);
    var newCell1 = newline.insertCell(1);
    var newText1 = document.createTextNode(dat)
    newCell1.appendChild(newText1)
    var newCell2 = newline.insertCell(2);
    var newText2 = document.createTextNode(mont)
    newCell2.appendChild(newText2)
};

create.addEventListener('click', function(event) {
    // 阻止表单默认提交行为和新增行逻辑合并
    event.preventDefault();
    nouvelleLigne();
});

如果需要添加成功后清空输入框，可以在 nouvelleLigne 函数末尾添加以下代码：

document.getElementById('denom').value = '';
document.getElementById('choixDate').value = '';
document.getElementById("montant").value = '';

如果想要首次添加时删掉表格里默认的「Vos dépenses vont ici!」提示行，可以在首次触发新增逻辑时判断删除该行即可。

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