简单材料成本计算器开发需求：实现阶梯计价功能

修改后的JavaScript代码 #

function calculateCost() {
  // 将输入值转为数字，避免字符串运算问题
  var width = parseFloat(document.getElementById("width").value);
  var depth = parseFloat(document.getElementById("depth").value);
  
  // 验证输入有效性，排除非数字和负数
  if (isNaN(width) || isNaN(depth) || width <= 0 || depth <= 0) {
    document.getElementById("result").innerHTML = "请输入有效的正数";
    return;
  }
  
  var area = width * depth;
  var totalCost;
  
  // 按面积区间应用不同单价
  if (area < 15) {
    totalCost = area * 2000;
  } else {
    // 面积≥15㎡时使用1750的单价（若需严格区分>15，可改为area > 15，等于15时用2000）
    totalCost = area * 1750;
  }
  
  // 格式化成本为两位小数，显示更规范
  document.getElementById("result").innerHTML = "总成本: £" + totalCost.toFixed(2);
}

修改说明 #

• 输入类型转换：将输入的字符串转为浮点数，避免直接使用字符串相乘导致的错误（比如输入"2"+"3"会得到"23"而非6）。
• 输入验证：添加了非数字、零和负数的判断，给用户明确的错误提示。
• 条件判断逻辑：按照需求实现了面积小于15㎡用2000单价，其余情况用1750单价；如果需要严格区分仅大于15㎡才用1750（等于15时仍用2000），只需将else改为else if (area > 15)，并补充else分支处理等于15的场景。
• 成本格式化：用toFixed(2)保留两位小数，符合货币显示的规范。

原HTML代码（无需修改） #

<form>
  Width in Metres: <input type="text" id="width"><br> Depth in Metres: <input type="text" id="depth"><br>
  <input type="button" value="Calculate" onclick="calculateCost()">
</form>

<div id="result"></div>

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