薪资变动计算器代码修复与功能完善技术请求

原代码核心问题 #

1. toggleSteps 函数逻辑错位，未处理薪资变动单选按钮的选择状态，导致Steps区域始终隐藏
2. 变量名语法错误：checkbox-third-step 不符合JS变量命名规则，应为驼峰式checkboxThirdStep
3. 字段显示逻辑完全颠倒，场景对应的输入框显示/隐藏混乱
4. 缺少复选框、绩效单选按钮的事件监听，无法动态切换界面元素
5. 场景1计算公式错误，原代码额外多乘了Field2，不符合要求的 result = (Field1 + Field1/100)
6. 未定义变量 displaySteps，导致代码运行报错

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Salary Change Calculator</title>
  <style>
    .field-group {
      margin: 10px 0;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>
  <h1>薪资变动计算器</h1>
  <form>
    <div class="field-group">
      <label>薪资变动是否包含多步骤？</label>
      <input type="radio" name="salary-change" value="yes" id="radio-yes">Yes
      <input type="radio" name="salary-change" value="no" id="radio-no" checked>No
    </div>

    <div id="steps" class="hidden field-group">
      <h2>步骤选择</h2>
      <input type="checkbox" id="checkbox-second-step">
      <label for="checkbox-second-step">第二步</label>
      <input type="checkbox" id="checkbox-third-step">
      <label for="checkbox-third-step">第三步</label>
    </div>

    <div id="increase-performance" class="hidden field-group">
      <h2>是否基于绩效涨薪？</h2>
      <input type="radio" name="increase-performance" value="yes" id="radio-performance-yes">Yes
      <input type="radio" name="increase-performance" value="no" id="radio-performance-no">No
    </div>

    <div id="fields-container" class="field-group">
      <h2>输入字段</h2>
      <!-- 场景1字段 -->
      <div id="fields-1" class="hidden">
        <input type="number" placeholder="Field1" id="field-1">
      </div>
      <!-- 场景2字段 -->
      <div id="fields-2" class="hidden">
        <input type="number" placeholder="Field3" id="field-3">
        <input type="number" placeholder="Field4" id="field-4">
      </div>
      <!-- 场景3字段 -->
      <div id="fields-3" class="hidden">
        <input type="number" placeholder="Field5" id="field-5">
        <input type="number" placeholder="Field6" id="field-6">
      </div>
    </div>

    <div class="field-group">
      <button type="button" id="calculate-button">计算</button>
      <p id="result"></p>
    </div>
  </form>

  <script>
    // 获取所有DOM元素
    const radioYes = document.getElementById('radio-yes');
    const radioNo = document.getElementById('radio-no');
    const stepsDiv = document.getElementById('steps');
    const checkboxSecond = document.getElementById('checkbox-second-step');
    const checkboxThird = document.getElementById('checkbox-third-step');
    const perfDiv = document.getElementById('increase-performance');
    const perfYes = document.getElementById('radio-performance-yes');
    const perfNo = document.getElementById('radio-performance-no');
    
    const fields1 = document.getElementById('fields-1');
    const field1 = document.getElementById('field-1');
    const fields2 = document.getElementById('fields-2');
    const field3 = document.getElementById('field-3');
    const field4 = document.getElementById('field-4');
    const fields3 = document.getElementById('fields-3');
    const field5 = document.getElementById('field-5');
    const field6 = document.getElementById('field-6');
    
    const calculateBtn = document.getElementById('calculate-button');
    const resultEl = document.getElementById('result');

    // 切换Steps区域显示
    function toggleStepsArea() {
      stepsDiv.classList.toggle('hidden', !radioYes.checked);
      // 切换选项时重置状态
      if (!radioYes.checked) {
        checkboxSecond.checked = false;
        checkboxThird.checked = false;
        perfDiv.classList.add('hidden');
        hideAllFields();
        resultEl.textContent = '';
      }
      updateFieldDisplay();
    }

    // 更新字段显示逻辑
    function updateFieldDisplay() {
      hideAllFields();
      perfDiv.classList.add('hidden');

      const isSecondChecked = checkboxSecond.checked;
      const isThirdChecked = checkboxThird.checked;

      if (isSecondChecked && isThirdChecked) {
        // 场景2：同时选中第二步和第三步
        fields2.classList.remove('hidden');
      } else if (isSecondChecked && !isThirdChecked) {
        // 仅选中第二步，显示绩效单选
        perfDiv.classList.remove('hidden');
        if (perfYes.checked) {
          // 场景1：绩效选Yes
          fields1.classList.remove('hidden');
        } else if (perfNo.checked) {
          // 场景3：绩效选No
          fields3.classList.remove('hidden');
        }
      }
    }

    // 隐藏所有字段组
    function hideAllFields() {
      fields1.classList.add('hidden');
      fields2.classList.add('hidden');
      fields3.classList.add('hidden');
    }

    // 计算逻辑
    function calculateResult() {
      let resultValue = null;
      const isSecondChecked = checkboxSecond.checked;
      const isThirdChecked = checkboxThird.checked;

      if (isSecondChecked && isThirdChecked) {
        // 场景2公式：(Field3 + Field4)*2
        const f3 = parseFloat(field3.value) || 0;
        const f4 = parseFloat(field4.value) || 0;
        resultValue = (f3 + f4) * 2;
      } else if (isSecondChecked && perfYes.checked) {
        // 场景1公式：Field1 + Field1/100
        const f1 = parseFloat(field1.value) || 0;
        resultValue = f1 + (f1 / 100);
      } else if (isSecondChecked && perfNo.checked) {
        // 场景3公式：Field5 * Field6
        const f5 = parseFloat(field5.value) || 0;
        const f6 = parseFloat(field6.value) || 0;
        resultValue = f5 * f6;
      } else {
        resultEl.textContent = '无需计算';
        return;
      }

      resultEl.textContent = `计算结果：${resultValue.toFixed(2)}`;
    }

    // 添加事件监听
    radioYes.addEventListener('change', toggleStepsArea);
    radioNo.addEventListener('change', toggleStepsArea);
    checkboxSecond.addEventListener('change', updateFieldDisplay);
    checkboxThird.addEventListener('change', updateFieldDisplay);
    perfYes.addEventListener('change', updateFieldDisplay);
    perfNo.addEventListener('change', updateFieldDisplay);
    calculateBtn.addEventListener('click', calculateResult);

    // 初始化显示
    toggleStepsArea();
  </script>
</body>
</html>

关键修复点说明 #

• 重构步骤切换逻辑，根据薪资变动单选按钮的选择状态控制Steps区域显示/隐藏
• 为所有交互元素添加事件监听，实现动态界面切换
• 修正场景1的计算公式，移除错误的Field2相乘操作
• 使用CSS类控制元素显示状态，替代直接修改style属性，提升可维护性
• 增加状态重置逻辑，避免切换选项时残留之前的选择和输入
• 修复变量名语法错误，确保JS代码正常运行
• 对输入值做非空处理，避免计算时出现NaN错误

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