在 javascript 中提交计算后如何防止 NaN 和 Infinity 结果

Question

I have simply javascript code. It's CBD dosage calculator. ( even i don't know how i got it:D ) but, after submit button i get NaN or Infinite when some input is empty. How i can get alert or do nothing when inputs are empty or one of them.

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>

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`;});

I have tried to put isNaN but now is showing Infinite when one of the input is empty.

How can I get a notification or not show anything when I confirm the button.

Answer 1

First make it a function. Put the values you want to check in if. if it doesn't compare its terms, send alert and return

Answer 2

In calculateButton2.addEventListener you can check if weight.value, cbdin.value and strength.value are defined. If they are not, you can use alert("Your message") function to notify user.

Answer 3

I have just added some validation checking with condition like weightValue == ''

 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; if (cbdConcentrationValue == '') { alert('fill the fields') // write your message } else { 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; } if (weightValue == '' || cbdInDrop == '') { alert('fill the fields') // write your message } else { 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`; } });

 <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" /><br> <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" /><br><br> <span>Koľko mg CBD je v jednej kvapke</span> <input required id="cbdin" type="number" /><br><br> <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><br><br> <button id="calculate-button-2">Vypočítať</button> <p id="result-2"></p> </div>