如何计算需要通过特定于控件的计算规则从各种表单控件元素更新的输出值？

Question

我需要一些帮助，因为我对 JavaScript 还很陌生。

我想创建一个计算会员费的函数

我尝试在 JavaScript 中创建一个函数来检查是否只选择了一个选项，但我不知道如何制作它以便我可以在用户有资格获得一个以上或所有折扣的情况下计算费用。目前还没有针对年龄条件的 JS（60 到 80 岁之间），因为我不确定如何去做。

function feeCalc() {
  var ans = document.getElementById("answer");
  if (document.getElementById('medicalCond-yes').checked) {
    ans.value = calculate('medicalCond-yes');
  }
  if (document.getElementById('empstatus-yes').checked) {
    ans.value = calculate('empstatus-yes');
  }
  if (document.getElementById('empstatus-no').checked) {
    ans.value = calculate('empstatus-no');
  }
  if (document.getElementById('medicalCond-no').checked) {
    ans.value = calculate('medicalCond-no');
  }
}

function calculate(action) {
  var standardRate = 10;
  var ageRate = 0.1;
  var medicalRate = 0.4;
  var unemployedRate = 0.3;
  var result;
  switch (action) {
    case 'medicalcond-yes':
      discount = (standardRate * studentRate);
      result = standardRate - discount;
      break;

    case 'empstatus-yes':
      discount = (standardRate * unemployedRate);
      result = standardRate - discount;
      break;

    case 'empstatus-no':
      result = standardRate;
      break;

    case 'medicalcond-no':
      result = standardRate;
      break;
  }
  return result;
}

<div class="form">
  <label>
    Age
  </label>
  <input type="range" value="50" min="1" max="100" class="slider" id="age"/>
</div>

<div class="form">
  <label>
    Do you have any long-term medical conditions
    that can affect daily life
  </label>
  <br/>
  <input type="radio" name="status" value="yes" id="medicalCond-yes"/>Yes
  <input type="radio" name="status" value="no" id="medicalCond-no"/>No
</div>

<div class="form">
  <label>
    Are you currently employed?
  </label>
  <br/>
  <input type="radio" name="empstatus" value="yes" id="empstatus-yes"/>Yes
  <input type="radio" name="empstatus" value="no" id="empstatus-no"/>No
</div>

<div class="form">
  <label>
    Membership Fee
  </label>
  <br/>
  Total Fee:
  <input type="text" id="answer" readonly/>
  <input type="button" value="Calculate" onclick="feeCalc()"/>
</div>

Answer 1

您可能希望一次性检查所有案例，而不是将案例路由到单个分支。

function feeCalc() {
  var ans = document.getElementById("answer");
  ans.value = calculateRate();
}

function calculateRate() {
  let discount = 0;
  const age = Number(document.getElementById('age').value);
  if (age >= 60 && age <= 80) {
    discount += 0.1;
  }
  if (document.getElementById('medicalCond-yes').checked) {
    discount += 0.4;
  }
  if (document.getElementById('empstatus-no').checked) {
    discount += 0.3;
  }
  return 1 - discount;
}

<div class="form">
  <label>
    Age
  </label>
  <input type="range" value="50" min="1" max="100" class="slider" id="age"/>
</div>

<div class="form">
  <label>
    Do you have any long-term medical conditions
    that can affect daily life
  </label>
  <br/>
  <input type="radio" name="status" value="yes" id="medicalCond-yes"/>Yes
  <input type="radio" name="status" value="no" id="medicalCond-no"/>No
</div>

<div class="form">
  <label>
    Are you currently employed?
  </label>
  <br/>
  <input type="radio" name="empstatus" value="yes" id="empstatus-yes"/>Yes
  <input type="radio" name="empstatus" value="no" id="empstatus-no"/>No
</div>

<div class="form">
  <label>
    Membership Fee
  </label>
  <br/>
  Total Fee:
  <input type="text" id="answer" readonly/>
  <input type="button" value="Calculate" onclick="feeCalc()"/>
</div>