HTML JavaScript计算器新增select后无计算结果bug排查及功能咨询

问题修复说明 #

已定位的BUG列表 #

• 你用const声明了x、y、z变量，后续又对这些变量重新赋值，const定义的常量不允许修改，运行会直接抛出异常阻断代码执行
• 没有提前获取id为unit4的下拉控件值，直接使用unit4变量会触发未定义报错
• unit4的单位转换逻辑完全错误：你直接把DOM节点对象#Calculate当成数值做转换，正确逻辑应该是对计算得到的结果做单位换算，同时判断条件里写错了unit4 == "result"，实际应该是unit4 == "cm"
• 介电常数（Di-Electric Constant）是无量纲单位，不需要做英寸/厘米/毫米的转换，你给unit1加的转换逻辑完全多余，还会导致介电常数值错误
• 缺少Length结果的计算逻辑，也没有按要求格式化输出内容

修复后的完整JavaScript代码 #

document.querySelector('#calculateForm').addEventListener('submit', function(e) {
  e.preventDefault();
  result();
})

function result() {
  // 介电常数无量纲，不需要单位转换
  let x = Number(document.querySelector("#constant").value);
  
  // 处理介质高度数值和单位转换，统一转成米
  let y = Number(document.querySelector("#height").value);
  const unit2 = document.getElementById("unit2").value;
  if (unit2 == "in") {
    y = y * 0.0254
  } else if (unit2 == "mm") {
    y = y * 0.001
  } else if (unit2 == "cm") {
    y = y * 0.01
  }

  // 处理频率数值和单位转换，统一转成Hz
  let z = Number(document.querySelector("#freq").value);
  const unit3 = document.getElementById("unit3").value;
  if (unit3 == "mhz") {
    z = z * 10 ** 6
  } else if (unit3 == "ghz") {
    z = z * 10 ** 9
  }

  // 核心计算逻辑
  const c = 3 * 10 ** 8;
  const k = x + 1;
  const k2 = k / 2;
  const k3 = Math.sqrt(k2);
  const y1 = z * 2;
  // 计算得到的width初始单位为米
  let width = c / (y1 * k3);
  // 示例：这里按常规微带天线规则Length为Width的1/2，你可以根据实际业务修改计算逻辑
  let length = width / 2;

  // 结果单位转换：按unit4选择的单位转换
  const unit4 = document.getElementById("unit4").value;
  let unitRatio;
  let unitText;
  if (unit4 == "in") {
    unitRatio = 39.3701; // 米转英寸系数
    unitText = "in";
  } else if (unit4 == "mm") {
    unitRatio = 1000; // 米转毫米系数
    unitText = "mm";
  } else { // cm
    unitRatio = 100; // 米转厘米系数
    unitText = "cm";
  }
  width = (width * unitRatio).toFixed(4); // 保留4位小数，可按需调整
  length = (length * unitRatio).toFixed(4);

  // 按要求格式化输出结果
  const resultDom = document.querySelector("#Calculate");
  resultDom.textContent = `Width: ${width} ${unitText}\nLength: ${length} ${unitText}`;
  resultDom.style.display = "block";
}

额外调整说明 #

1. 输出结果默认保留4位小数，你可以修改toFixed(4)里的数值调整精度
2. 示例中Length按Width的1/2计算，如果你的业务有其他计算规则，直接修改let length = width / 2这一行的逻辑即可
3. 原有CSS和HTML代码不需要调整，可直接复用

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