原生Javascript开发支出跟踪器多输入框取值与页面展示问题

问题原因 #

你代码里的核心错误有以下几个：

• document.querySelectorAll('.input-all') 返回的是包含3个输入框的节点集合，不是单个DOM元素，直接取.value必然返回undefined
• 模板字符串里直接插入inputName/inputDate/inputAmount这几个DOM元素对象，转成字符串后就会输出[object HTMLInputElement]
• 存储支出记录时没有结构化存储，后续也没办法做删除、统计等扩展操作
• 渲染列表前没有清空旧内容，每次新增都会重复渲染所有历史记录

修正后的完整JS代码 #

let addButton = document.getElementById('add-btn');
addButton.addEventListener('click', add);
let inputAll = document.querySelectorAll('.input-all');
let expenses = []

function add() {
  // 批量提取所有输入框的值
  const inputValues = Array.from(inputAll).map(input => input.value.trim())
  // 只要有一个输入框为空就阻止提交
  if (inputValues.some(val => val === '')) return
  // 结构化存储支出对象，方便后续扩展
  const newExpense = {
    name: inputValues[0],
    date: inputValues[1],
    amount: inputValues[2]
  }
  expenses.push(newExpense)
  // 提交后清空输入框
  inputAll.forEach(input => input.value = '')
  displayExpenses()
}

function displayExpenses() {
  let expensesUl = document.getElementById('expenses-ul');
  // 先清空旧的列表内容，避免重复渲染
  expensesUl.innerHTML = '';
  // 遍历渲染所有支出记录
  expenses.forEach(expense => {
    let expensesLi = document.createElement('li');
    expensesLi.innerText = `${expense.date} | ${expense.name} | ￥${expense.amount}`
    expensesUl.appendChild(expensesLi);
  })
}

简化方案说明 #

• 多输入框取值直接用Array.from(inputAll).map(i => i.value)就能批量拿到所有值，不需要单独给每个输入框加id获取，后续新增输入字段时也不用修改JS逻辑
• 支出记录结构化存为对象，后续要做删除、按日期筛选、金额统计等功能都很方便
• 如果后续把提交按钮移入form标签内，需要在add函数第一行加event.preventDefault()阻止表单默认提交刷新页面的行为

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