Number.parseInt() Keeps Returning NaN

Question

I'm working on a binary-to-decimal and decimal-to-binary converter in JavaScript and thought I'd try using Number.parseInt() to go about this. That said, my output keeps showing "NaN" instead of the desired conversion. Any assistance with this would be very much appreciated!

    // Get binary number from user for decimal conversion
            let binary = document.getElementById("binary").value;
            // Set the base (radix) to 2 for decimal conversion
            let binBase = 2;
            // Get decimal number from user for binary conversion
            let decimal = document.getElementById("decimal").value;
            // Set the base (radix) to 10 for binary conversion
            let decBase = 10;

            // Function to convert binary to decimal
            function getDecimal(binary, binBase) {
            let finalDec = Number.parseInt(binary, binBase);
               // Output the decimal number
               document.getElementById("showDecimal").innerHTML = finalDec;
            return finalDec;
            }

            // Function to convert decimal to binary
            function getBinary(decimal, decBase) {
               let finalBin = Number.parseInt(decimal, decBase);
               // Output the binary number
               document.getElementById("showBinary").innerHTML = finalBin;
            return finalBin;
            }

 

   <html>
               <head>
                  <meta charset="UTF-8">
                  <title>Binary to Decimal and Back Converter</title>
                  <link rel="stylesheet" href="style.css">
               </head>
               <body>
                  <h3>Please Enter the Binary Number (Base 2) That You Would Like Converted to Decimal Form (Base 10)</h3>
                  Binary: <input type="text" id="binary" value="">
                  <button onclick="getDecimal()">Calculate</button>
                  The Decimal Number Is:
                  <p id="showDecimal"></p>

                  <h3>Please Enter the Decimal Number (Base 10) that You Would Like Converted to Binary Form (Base 2)</h3>
                  Decimal: <input type="text" id="decimal" value="">
                  <button onclick="getBinary()">Calculate</button>
                  The Binary Number Is:
                  <p id="showBinary"></p>
            
                  <script src="script.js"></script>
               </body>
            </html>

Picture of what it looks like in browser:

Thanks in advance for your help!

https://stackoverflow.com/help/mcve You should verify that the HTML part isn't a problem and then post only the minimal required code to reproduce the problem. — FINDarkside, Jun 27 '18 at 10:21
You are not passing any values when you are calling your functions, but those _expect_ to be passed parameters. So you are looking at the result of `Number.parseInt(undefined, undefined)`, basically, and that that’s NaN isn’t an actual surprise. — CBroe, Jun 27 '18 at 10:21
`let binary = document.getElementById("binary").value;` and `let decimal = document.getElementById("decimal").value;` are set _once_. The variables don’t magically change when `.value` changes. And inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. [Use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don't_use_these) instead. — Sebastian Simon, Jun 27 '18 at 10:22
You fetch the values for binary and decimal before the user has entered data. You must fetch the values when the conversion button is being clicked. — Adder, Jun 27 '18 at 10:23

Adder · Answer 1 · 2018-06-27T10:38:42.813

Fetch the input field values when the button is clicked:

// Function to convert binary to decimal
function getDecimal() {
   var binary = document.getElementById("binary").value;
   let finalDec = Number.parseInt(binary, 2);
   // Output the decimal number
   document.getElementById("showDecimal").innerHTML = finalDec;
   return finalDec;
}

// Function to convert decimal to binary
function getBinary() {
   var decimal = document.getElementById("decimal").value;
   let finalBin = Number.parseInt(decimal, 10).toString(2);
   // Output the binary number
   document.getElementById("showBinary").innerHTML = finalBin;
   return finalBin;
}

Also the binary number has to be formatted with .toString(2)

score 0 · Answer 2 · answered Jun 27 '18 at 10:30

Change your getDecimal to this and similarly make the changes for getBinary too.

// Function to convert binary to decimal

function getDecimal() {
    let binary = document.getElementById("binary").value;
    let binBase = 2;
    let finalDec = Number.parseInt(binary, binBase);

   // Output the decimal number
   document.getElementById("showDecimal").innerHTML = finalDec;
   return finalDec;
}

score 0 · Answer 3 · answered Jun 27 '18 at 10:42

You are trying to get the input value at the beginning but not during function execution.At the beginning the input are empty , so get them inside the function.Besides since binBase & decBase are declared, again declaring them as argument will require the value to pass from html like. So you can skip passing these two variable as argument

<button onclick="getDecimal(10)">Calculate</button>

var binBase = 2;
var decBase = 10;

function getDecimal() {
  let binary = document.getElementById("binary").value;
  let finalDec = parseInt(binary, binBase);

  document.getElementById("showDecimal").innerHTML = finalDec;
  return finalDec;
}

function getBinary() {
  let decimal = document.getElementById("decimal").value;
  let finalBin = parseInt(decimal, decBase);
  document.getElementById("showBinary").innerHTML = finalBin;
  return finalBin;
}

score 0 · Answer 4 · answered Jun 27 '18 at 10:44

Well parseInt is basically used to convert any number to the integer if you want to convert the number to the binary then you have to use toString function of the javascript in order to get you desired output.Here is the proper code which will resolve your query.

<html>
<head>
    <meta charset="UTF-8">
    <title>Binary to Decimal and Back Converter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Please Enter the Binary Number (Base 2) That You Would Like Converted to Decimal Form (Base 10)</h3>
    Binary: <input type="text" id="binary" value="">
    <button onclick="getDecimal()">Calculate</button>
    The Decimal Number Is:
    <p id="showDecimal"></p>

    <h3>Please Enter the Decimal Number (Base 10) that You Would Like Converted to Binary Form (Base 2)</h3>
    Decimal: <input type="text" id="decimal" value="">
    <button onclick="getBinary()">Calculate</button>
    The Binary Number Is:
    <p id="showBinary"></p>
</body>
</html>
<script type="text/javascript">
    function getDecimal() {
        var binary=document.getElementById("binary").value; 
        if (isNaN(binary)) { alert("not a number"); }
        else{
            var foo = parseInt(binary, 2);
            alert(foo);
        }
    }
    function getBinary(){
        var decimal=document.getElementById("decimal").value;   
        if (isNaN(decimal)) { alert("not a number"); }
        else{
            var foo = Number(decimal).toString(2);
            alert(foo);
        }
    }   
</script>

Number.parseInt() Keeps Returning NaN

4 Answers4