数字输入框减法实现及财务应用收支计算逻辑问题求助

一、Number类型输入框的减法最简实现 #

直接获取输入框的值并转换为数字类型，执行减法运算即可，同时要处理空值或非数字输入的情况：

// 示例：两个数字输入框做减法并展示结果
const numInputA = document.querySelector('#numA');
const numInputB = document.querySelector('#numB');
const resultDisplay = document.querySelector('#result');

// 执行减法的函数
function calculateSubtraction() {
  // 转换为数字，空值/非数字时默认取0，避免NaN错误
  const numA = Number(numInputA.value) || 0;
  const numB = Number(numInputB.value) || 0;
  // 执行减法并更新结果显示
  resultDisplay.textContent = numA - numB;
}

// 绑定触发事件（比如按钮点击）
document.querySelector('#calcBtn').addEventListener('click', calculateSubtraction);

二、财务应用收入/支出计算的问题修复 #

你的代码核心问题是无论收入还是支出，都先执行了累加操作，导致支出逻辑完全错误。以下是修复后的代码和说明：

问题分析 #

原代码中，点击按钮时先执行了zeroBase += inputNumberToValue，相当于不管支出与否，都先把输入值加到了总金额里；之后支出分支里的finalValueIncrement - inputNumberToValue只是临时修改了显示值，但zeroBase本身已经被错误累加，后续所有计算都会出错。

修复后的代码 #

const buttonAdd = document.querySelector('[data-js="buttonAdd"]')
const inputAdd = document.querySelector('[data-js="inputAdd"]')
const containerText = document.querySelector('[data-js="container-text"]')
const incomeInput = document.querySelector('[data-js="income-input"]')
const expenseInput = document.querySelector('[data-js="expense-input"]')
const descriptionContainer = document.querySelector('[data-js="description"]')
const inputNumber = document.querySelector('[data-js="input-number"]')

let zeroBase = 0

buttonAdd.addEventListener('click', () => {
  // 将输入值转为数字，空值或非数字时默认取0，避免NaN
  const inputValue = Number(inputNumber.value) || 0;

  // 根据选中的单选按钮更新总金额
  if (incomeInput.checked) {
    zeroBase += inputValue;
  } else if (expenseInput.checked) {
    zeroBase -= inputValue;
  }

  // 更新页面显示的总金额
  containerText.textContent = zeroBase;
  // 清空数字输入框
  inputNumber.value = '';
})

修复要点 #

1. 先判断类型再更新总金额：根据选中的「收入」或「支出」，直接对zeroBase执行加/减操作，而不是先统一累加再临时调整显示值。
2. 处理无效输入：用Number(inputNumber.value) || 0确保输入为空或非数字时，不会出现NaN错误。
3. 统一更新显示：无论收入还是支出，操作完成后统一更新页面的总金额显示，逻辑更清晰。

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