How prevent NaN and Infinity result after submit calculation in javascript-CodePudding

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 >
<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.

CodePudding user response：

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 >
  <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>

CodePudding user response：

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

CodePudding user response：

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.