如何避免JavaScript CBD剂量计算器提交后出现NaN或Infinity

问题说明 #

编写的CBD剂量计算器在输入为空时，结果会出现NaN或Infinity。尝试过isNaN()处理但无效，需要实现空输入时弹出提示或不显示结果。

原代码 #

JavaScript代码

const dropperSize = 0.05; // ml
const bottleSize = 10; // ml
const cbdConcentration = document.getElementById("cbd-concentration");
const calculateButton1 = document.getElementById("calculate-button-1");
const result1 = document.getElementById("result-1");

const weight = document.getElementById("weight");
const strength = document.getElementById("strength");
const calculateButton2 = document.getElementById("calculate-button-2");
const result2 = document.getElementById("result-2");

// Calculator 1: CBD per drop
calculateButton1.addEventListener("click", function() {
  let cbdConcentrationValue = cbdConcentration.value;
  let cbdPerMl = cbdConcentrationValue / bottleSize;
  let cbdPerDrop = cbdPerMl * dropperSize;
  result1.innerHTML = `One drop contains ${cbdPerDrop} mg of CBD.`;

});

calculateButton2.addEventListener("click", function() {
  let weightValue = weight.value;
  let cbdInDrop = cbdin.value
  let strengthValue = strength.value;
  let cbdDose;
  if (strengthValue === "low") {
    cbdDose = 2;
  } else if (strengthValue === "medium") {
    cbdDose = 7;
  } else if (strengthValue === "high") {
    cbdDose = 13;
  }
  let cbdPerDay = weightValue / 10 * cbdDose;
  let numDrops = cbdPerDay / cbdInDrop;
  let roundedDrops = Math.round(numDrops);
  if (isNaN(roundedDrops)) roundedDrops = 0;
  let mgCbdPerDay = roundedDrops * cbdInDrop;
  if (isNaN(mgCbdPerDay)) mgCbdPerDay = 0;
  result2.innerHTML = `Môžete užívať ${roundedDrops} kvapiek denne. Čo predstavuje ${mgCbdPerDay} mg CBD`;
});

HTML代码

<div class="cbd-calculator">
  <p>
    Vypočítajte si koľko mg CBD je v jednej kvapke a podľa závažnosti Vášho problému zistite, koľko kvapiek CBD denne uživať.
  </p>
  <span>Celková koncentrácia CBD ( koľko mg CBD je vo fľaštičke )</span>
  <input required id="cbd-concentration" type="number" placeholder="500" />
  <button id="calculate-button-1">Koľko CBD obsahuje jedna kvapka</button>
  <p id="result-1"></p>
  <span>Váha (kg):</span>
  <input required id="weight" type="number" />
  <span>Koľko mg CBD je v jednej kvapke</span>
  <input required id="cbdin" type="number" />
  <span>Požadovaná sila</span>
  <select required id="strength">
    <option value="low">Nízka</option>
    <option value="medium">Stredná</option>
    <option value="high">Vysoká</option>
  </select>
  <button id="calculate-button-2">Vypočítať</button>
  <p id="result-2"></p>
</div>

解决方案 #

问题根源是空输入的value为字符串，转数字后为0，除以0会生成Infinity；空字符串参与计算则生成NaN。解决核心是在计算前做输入有效性验证，确保所有输入为有效正数后再执行计算。

1. 修复计算器1（单滴CBD含量计算） #

在点击事件开头添加输入验证，无效则清空结果并提示：

// Calculator 1: CBD per drop
calculateButton1.addEventListener("click", function() {
  // 将输入转为数字类型
  const cbdConcentrationValue = Number(cbdConcentration.value);
  
  // 验证：非空、是有效数字、大于0
  if (!cbdConcentrationValue || cbdConcentrationValue <= 0) {
    result1.innerHTML = "";
    alert("请输入有效的CBD总含量（大于0的数字）");
    return; // 终止后续计算
  }

  const cbdPerMl = cbdConcentrationValue / bottleSize;
  const cbdPerDrop = cbdPerMl * dropperSize;
  // 格式化结果为2位小数，提升可读性
  result1.innerHTML = `One drop contains ${cbdPerDrop.toFixed(2)} mg of CBD.`;
});

2. 修复计算器2（每日剂量计算） #

首先补上原代码遗漏的cbdin DOM元素获取，再添加完整输入验证：

// 补上遗漏的DOM元素获取
const cbdin = document.getElementById("cbdin");

calculateButton2.addEventListener("click", function() {
  const weightValue = Number(weight.value);
  const cbdInDrop = Number(cbdin.value);
  const strengthValue = strength.value;

  // 验证所有必填输入：非空、有效数字、大于0
  if (!weightValue || weightValue <= 0 || !cbdInDrop || cbdInDrop <= 0) {
    result2.innerHTML = "";
    alert("请填写所有必填项，且输入大于0的数字");
    return;
  }

  let cbdDose;
  if (strengthValue === "low") {
    cbdDose = 2;
  } else if (strengthValue === "medium") {
    cbdDose = 7;
  } else if (strengthValue === "high") {
    cbdDose = 13;
  } else {
    // 兜底验证select异常值
    alert("请选择有效的剂量强度");
    result2.innerHTML = "";
    return;
  }

  const cbdPerDay = weightValue / 10 * cbdDose;
  const numDrops = cbdPerDay / cbdInDrop;
  const roundedDrops = Math.round(numDrops);
  const mgCbdPerDay = roundedDrops * cbdInDrop;

  // 格式化结果
  result2.innerHTML = `Môžete užívať ${roundedDrops} kvapiek denne. Čo predstavuje ${mgCbdPerDay.toFixed(2)} mg CBD`;
});

额外优化 #

• 强制将输入转为Number类型，避免字符串参与计算的隐性问题
• 使用toFixed(2)格式化结果，减少冗余小数位
• 补充cbdin DOM元素获取（原代码遗漏）
• 对下拉选框增加兜底验证，防止异常值导致计算错误

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