javascript - 指定的值“NaN”无法解析，或在控制台中超出范围

问题描述

我正在构建一个交换项目，我需要使用 jQuery/JavaScript 从选择选项中获取数据并将值传递给 API URL。

当我运行我的代码时我没有得到正确的值我一直得到"NaN"无法解析的指定值，或者超出控制台的范围，我在这里做错了什么。有人可以帮我检查这段代码吗？

这是我的代码：

$(document).ready(function () {
  // some variables

  var baseCurrency = 'BTC';

  var baseNumber = 1;

  var targetCurrency = 'USD';

  var targetNumber ;

  var url ;

  currencyConverter(baseCurrency, baseNumber,targetCurrency,targetNumber)

  // get base currency value

  $("#base").change(function () {
    // base currency

    baseCurrency = $(this).children("option:selected").val();

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)


  });

  // get base currency number

  $("#baseNumber").change(function(){

    // base number

    baseNumber = $(this).val()

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)

  })

  // get target currency value

  $("#target").change(function () {
    // target currency

    targetCurrency = $(this).children("option:selected").val();

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)

  });

  // get target currency number

  $("#targetNumber").change(function(){

    // target number

    targetNumber = $(this).val()

    // call currencyConverter function

    currencyConverter2(baseCurrency,baseNumber,targetCurrency,targetNumber)

  })


  // function to convert BaseCurrency to TargetCurrency

  function currencyConverter(baseCurrency, baseNumber,targetCurrency,targetNumber)
  {
      // api url

      url = "https://coinlib.io/api/v1/coin?key=659b81f02b22b218&pref="+targetCurrency+"&symbol="+baseCurrency

      // make a get request to api

    

      $.get(url,function(data){
          console.log(data.price)

          for (let [key, value] of Object.entries(data.price)) {
            
            var result = value * baseNumber;

           $("#targetNumber").val(result);

          }
          console.log(`data.price.${targetCurrency}`)
      })
  }

  function currencyConverter2(baseCurrency, baseNumber,targetCurrency,targetNumber)
  {
      // api url

      url = "https://coinlib.io/api/v1/coin?key=659b81f02b22b218&pref="+baseCurrency+"&symbol="+targetCurrency

      // make a get request to api

      $.get(url,function(data){
          console.log(data.price)

          for (let [key, value] of Object.entries(data.price)) {

            console.log(value)
            
            var result = value * targetNumber

           $("#baseNumber").val(result)

          }
          console.log(`data.price.${targetCurrency}`)
      })
  }


});

<!DOCTYPE html>
<html>
    <head>
        <title>Currency Converter in Javascript</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <br><br>
            <h1 style="text-align: center;">Currency Converter</h1>
            <form id="myForm">
                <br><br>
                <label for="Base Currency">Base Currency</label>
                <select class="form-control" id="base">
                    <option>USD</option>
                    <option>BTC</option>
                    <option>ETH</option>
                    <option>LTC</option>
                    <option>BCH</option>
                    <option>ZCASH</option>
                    
                </select>
                <br>
                <div class="form-group">
                    <input type="number" class="form-control" id="baseNumber" value="1">
                </div>
                <label for="Target Currency">Target Currency</label>
                <select class="form-control" id="target">
                    <option>BTC</option>
                    <option>USD</option>
                    <option>ETH</option>
                    <option>LTC</option>
                    <option>BCH</option>
                    <option>ZCASH</option>
                    
                </select>
                <br>
                <div class="form-group">
                    <input type="number" class="form-control" id="targetNumber">
                </div>
            </form>
        </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   
</html>

标签： javascriptjquery

解决方案

删除了两个 currencyConverter 方法中的 for 循环。你本质上是在迭代你的 data.price 值，所以当它到达值“。”的小数点时。自“。”以来它失败了不是数字 (NaN)。

$(document).ready(function () {
  // some variables

  var baseCurrency = 'BTC';

  var baseNumber = 1;

  var targetCurrency = 'USD';

  var targetNumber ;

  var url ;

  currencyConverter(baseCurrency, baseNumber,targetCurrency,targetNumber)

  // get base currency value

  $("#base").change(function () {
    // base currency

    baseCurrency = $(this).children("option:selected").val();

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)


  });

  // get base currency number

  $("#baseNumber").change(function(){

    // base number

    baseNumber = $(this).val()

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)

  })

  // get target currency value

  $("#target").change(function () {
    // target currency

    targetCurrency = $(this).children("option:selected").val();

    // call currencyConverter function

    currencyConverter(baseCurrency,baseNumber,targetCurrency,targetNumber)

  });

  // get target currency number

  $("#targetNumber").change(function(){

    // target number

    targetNumber = $(this).val()

    // call currencyConverter function

    currencyConverter2(baseCurrency,baseNumber,targetCurrency,targetNumber)

  })


  // function to convert BaseCurrency to TargetCurrency

  function currencyConverter(baseCurrency, baseNumber,targetCurrency,targetNumber)
  {
      // api url

      url = "https://coinlib.io/api/v1/coin?key=659b81f02b22b218&pref="+targetCurrency+"&symbol="+baseCurrency

      // make a get request to api

      $.get(url,function(data){
          
            var result = data.price * baseNumber;

           $("#targetNumber").val(result);
      })
  }

  function currencyConverter2(baseCurrency, baseNumber,targetCurrency,targetNumber)
  {
      // api url

      url = "https://coinlib.io/api/v1/coin?key=659b81f02b22b218&pref="+baseCurrency+"&symbol="+targetCurrency

      // make a get request to api

      $.get(url,function(data){
         
            var result = data.price * targetNumber

           $("#baseNumber").val(result)
      })
  }


});

<!DOCTYPE html>
<html>
    <head>
        <title>Currency Converter in Javascript</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <br><br>
            <h1 style="text-align: center;">Currency Converter</h1>
            <form id="myForm">
                <br><br>
                <label for="Base Currency">Base Currency</label>
                <select class="form-control" id="base">
                    <option>USD</option>
                    <option>BTC</option>
                    <option>ETH</option>
                    <option>LTC</option>
                    <option>BCH</option>
                    <option>ZCASH</option>
                    
                </select>
                <br>
                <div class="form-group">
                    <input type="number" class="form-control" id="baseNumber" value="1">
                </div>
                <label for="Target Currency">Target Currency</label>
                <select class="form-control" id="target">
                    <option>BTC</option>
                    <option>USD</option>
                    <option>ETH</option>
                    <option>LTC</option>
                    <option>BCH</option>
                    <option>ZCASH</option>
                    
                </select>
                <br>
                <div class="form-group">
                    <input type="number" class="form-control" id="targetNumber">
                </div>
            </form>
        </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   
</html>

javascript - 指定的值“NaN”无法解析，或在控制台中超出范围

问题描述

解决方案

推荐阅读