Why I getN a zero or NaN when doing math operation on input field value in Javascript

Question

When I try to retrieve the value of the input field and do some math operation, I get zero or NaN as a result. Knowing that I write only numbers in the input field and use parseInt method on the retrieved value

let myInput = document.getElementById("my-input").value;
let btnMonth = document.getElementById("month");
let btnDay = document.getElementById("day");
let myResult = document.getElementById("my-div");


function ageInDays() {
  return myResult.innerHTML = `Your age in Days: ${parseInt(myInput * 12 * 30)}`;
}

function ageInMonths () {
  return myResult.innerHTML = `Your age in Months: ${parseInt(myInput * 12)}`;
}

btnDay.addEventListener("click", ageInDays);
btnMonth.addEventListener("click", ageInMonths);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learn JavaScript</title>
    <link rel="stylesheet" href="mystyle.css">
    <style>
      
    </style>
  </head>
  <body>

    <div>
      <input type="text" id="my-input">
      <button id="day">Days</button>
      <button id="month">Months</button>
    </div>
    <div id="my-div"></div>


    <script src="mains.js"></script>
  </body>
</html>

Without seeing the actual code involved, or a representative test case, it's going to be hard for anyone to help. The `NaN` may be coming from several different coding errors/misunderstandings. — Pointy, Oct 14 '22 at 22:24
${parseInt(myInput * 12 * 30) Here you are basically doing parseInt(String * 12 * 30), so JS will try to calculate String * 12 * 30 which is NaN, and it will try to parse the NaN resulting in NaN. do: parseInt(myInput) * 12 * 30 — John Dist, Oct 14 '22 at 22:28
Get your value from the DOM within the function call, not in the global scope at the top. As it sits, your value would only get stored once. Any further change to it will not get stored. parse your input before doing math with it — Brent, Oct 14 '22 at 22:29
@Abdelhafid El bekkaoui, I had to put the value from the DOM within the function as **Brent** suggested. And it worked only this way. — Med, Oct 14 '22 at 23:26

score 1 · Accepted Answer · edited Oct 14 '22 at 22:47

Get your value from the DOM within the function call, not in the global scope at the top. As it sits, your value would only get stored once. Any further change to it will not get stored. parse your input before doing math with it.

Also, don't use innerHTML with user input. It is asecurity flaw. Use innerText instead.

let myInput = document.getElementById("my-input")
let btnMonth = document.getElementById("month");
let btnDay = document.getElementById("day");
let myResult = document.getElementById("my-div");


function ageInDays() {
  return myResult.innerHTML = `Your age in Days: ${parseInt(myInput.value) * 12 * 30}`;
}

function ageInMonths() {
  return myResult.innerHTML = `Your age in Months: ${parseInt(myInput.value) * 12}`;
}

btnDay.addEventListener("click", ageInDays);
btnMonth.addEventListener("click", ageInMonths);

<div>
  <input type="text" id="my-input">
  <button id="day">Days</button>
  <button id="month">Months</button>
</div>
<div id="my-div"></div>

Please use `parseInt` [_with_ the second parameter, `10`](/q/16880327/4642212). Consider using [`Number`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number#Function_syntax) or [`parseFloat`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) instead, or, specifically for ``s, [`.valueAsNumber`](//developer.mozilla.org/en/docs/Web/API/HTMLInputElement#Properties). — Sebastian Simon, Oct 14 '22 at 23:29

Why I getN a zero or NaN when doing math operation on input field value in Javascript

1 Answers1