Number.parseInt()继续返回NaN

时间:2018-06-27 10:19:25

标签: javascript html

我正在使用JavaScript在二进制到十进制和十进制到二进制的转换器上工作,以为我会尝试使用Number.parseInt()来解决这个问题。也就是说,我的输出始终显示“ NaN”,而不是所需的转换。任何帮助,将不胜感激!

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

浏览器中的图片:

enter image description here

在此先感谢您的帮助!

4 个答案:

答案 0 :(得分:0)

单击按钮时获取输入字段的值:

// 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;
}

此外,二进制数字必须使用.toString(2)

格式化

答案 1 :(得分:0)

将您的getDecimal更改为此,并同样对getBinary进行更改。

//将二进制转换为十进制的函数

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

enter image description here

答案 2 :(得分:0)

您正在尝试在开始时获取输入值,而不是在函数执行期间获取输入值。开始时,输入为空,因此请将其获取到函数内部。此外,还声明了binBasedecBase ,再次将其声明为参数将要求该值从html之类传递。因此您可以跳过将这两个变量作为参数传递

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

答案 3 :(得分:0)

Well parseInt基本上用于将任何数字转换为整数,如果您想将数字转换为二进制,则必须使用javascript的toString函数才能获得所需的输出。这里是正确的代码解决您的查询。

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