如何用JavaScript实现多变量年度费用计算器并支持多字段累加？

核心问题分析 #

原代码仅针对单个num1字段处理，且错误地全局获取选中的周期选项（所有下拉框共享同一name="method"，导致只会取第一个选中值），无法支持多字段累加。要实现灵活添加字段的需求，需通过类选择器批量处理统一结构的输入组，而非依赖固定ID。

修改后的完整代码 #

HTML 部分

<div class="container">
  <!-- 房屋费用组 -->
  <div class="input-control cost-group">
    <label style="float:left;" for="num1">🏠
      <input type="text" class="cost-input" id="num1" autofocus>
      $
    </label>
    <label style="float:left;" for="dropdown1">
      <select class="period-select">
        <option value="week">Week</option>
        <option value="month">Month</option>
        <option value="year">Year</option>
      </select>
    </label>
    <div style="clear:both;"></div>
  </div>

  <!-- 汽车费用组 -->
  <div class="input-control cost-group">
    <label style="float:left;" for="num2">🚗
      <input type="text" class="cost-input" id="num2">
      $
    </label>
    <label style="float:left;" for="dropdown2">
      <select class="period-select">
        <option value="week">Week</option>
        <option value="month">Month</option>
        <option value="year">Year</option>
      </select>
    </label>
    <div style="clear:both;"></div>
  </div>

  <!-- 可直接复制此结构添加新费用字段，无需修改JS -->
  <!-- <div class="input-control cost-group">
    <label style="float:left;" for="num3">💻
      <input type="text" class="cost-input" id="num3">
      $
    </label>
    <label style="float:left;" for="dropdown3">
      <select class="period-select">
        <option value="week">Week</option>
        <option value="month">Month</option>
        <option value="year">Year</option>
      </select>
    </label>
    <div style="clear:both;"></div>
  </div> -->

  <div class="input-control button">
    <button id="calculate">Calculate</button>
  </div>
</div>

<div class="container result">
  Answer
  <p class="answer">0</p>
</div>

JavaScript 部分

const calculateBtn = document.querySelector('#calculate');
const resultEl = document.querySelector('p.answer');

calculateBtn.addEventListener('click', function() {
  let totalAnnualCost = 0;
  // 获取所有费用输入组
  const costGroups = document.querySelectorAll('.cost-group');

  costGroups.forEach(group => {
    // 获取当前组的金额和周期，空输入默认按0处理
    const costValue = Number(group.querySelector('.cost-input').value) || 0;
    const period = group.querySelector('.period-select').value;

    // 计算单个组的年度费用
    let annualCost = 0;
    switch(period) {
      case 'week':
        annualCost = costValue * 52;
        break;
      case 'month':
        annualCost = costValue * 12;
        break;
      case 'year':
        annualCost = costValue;
        break;
    }

    // 累加到总费用
    totalAnnualCost += annualCost;
  });

  // 显示总结果
  resultEl.textContent = totalAnnualCost;
});

关键改动说明 #

1. HTML 结构标准化：

   • 给每个费用输入组添加统一类名cost-group，方便批量遍历
   • 费用输入框用类cost-input、周期选择框用类period-select，替代原固定ID，新增字段只需复制cost-group结构即可
   • 移除重复的name="method"，避免全局选中冲突

2. JS 逻辑优化：

   • 遍历所有cost-group，逐个计算单字段年度费用后累加
   • 用Number(...) || 0处理空输入，避免出现NaN错误
   • 使用switch语句替代多if-else，逻辑更清晰
   • 用textContent替代innerHTML，更安全且适合纯文本输出

内容的提问来源于stack exchange，提问作者özgür kuş