如何将MPa强度定价逻辑整合到HTML+JS混凝土用量计算器？

第一步：修正HTML中的错误 #

下拉框里20MPa的option值为空，会导致无法正确识别选中的强度，先修改这个问题：

<section class="price-calculator">
  <h1>Price Calculator</h1>
  <p>Cubic Meters (m3)</p>
  <input id="cubic-amount" placeholder="3" /><br />
  <p>Strength</p>
  <select name="mpa" id="mpa">
    <option value="20">20 (MPa)</option>
    <option value="25">25 (MPa)</option>
    <option value="32">32 (MPa)</option>
  </select>
  <button onclick="calculatePrice()">calculate</button>
  <p>Price ($AUD)</p>
  <div id="price-result"></div>
</section>

说明：去掉了每个option的独立id，直接给value赋值为对应的MPa数值，方便直接获取选中的强度值。

第二步：重构calculatePrice函数 #

无需单独获取每个option的值，直接获取下拉框选中项，根据强度调用对应定价函数，同时添加输入验证：

function calculatePrice() {
  // 处理方量输入，替换逗号为小数点并转为数值
  let amountStr = document.getElementById("cubic-amount").value.replace(",", ".");
  const amount = parseFloat(amountStr);
  
  // 验证方量是否在有效范围
  if (isNaN(amount) || amount < 0.1 || amount > 3.2) {
    document.getElementById("price-result").innerHTML = "请输入0.1-3.2之间的有效方量";
    return;
  }

  // 获取选中的强度值
  const selectedMpa = document.getElementById("mpa").value;
  
  let price;
  // 根据选中强度匹配对应定价函数
  switch(selectedMpa) {
    case "20":
      price = ifElse20(amount);
      break;
    case "25":
      price = ifElse25(amount); // 需确保已实现该函数
      break;
    case "32":
      price = ifElse32(amount); // 需确保已实现该函数
      break;
    default:
      price = "请选择强度";
  }

  document.getElementById("price-result").innerHTML = price;
}

说明：

• 先验证输入有效性，避免无效计算
• 通过selectedMpa直接获取选中的强度，用switch语句调用对应定价函数
• 直接将定价函数返回的结果渲染到页面

第三步：优化定价函数（可选但推荐） #

长串if-else可读性差，建议用数组存储价格区间对应值，通过计算索引快速取值，以20MPa为例：

function getPrice20(val) {
  // 索引对应0.1m3区间：0→0.1-0.19，1→0.2-0.29...31→3.2-3.29
  const prices = [
    "$230", "$250", "$270", "$290", "$310", "$330", "$350", "$380",
    "$410", "$430", "$470", "$520", "$570", "$610", "$650", "$690",
    "$740", "$780", "$820", "$860", "$900", "$940", "$980", "$1020",
    "$1060", "$1100", "$1150", "$1190", "$1240", "$1290", "$1330", "$1380"
  ];
  // 计算对应索引
  const index = Math.floor((val - 0.1) / 0.1);
  // 返回对应价格或空值
  return index >= 0 && index < prices.length ? prices[index] : "";
}

说明：这种写法更简洁，后续修改价格只需调整数组，无需修改大量条件判断。

补充提示 #

• 需确保已实现ifElse25和ifElse32函数，或用上述优化方式实现
• 若定价函数返回数值而非带$的字符串，可统一在显示时添加格式，比如price.toFixed(2) + " $AUD"

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