Блог

Главная - Вопросы по программированию - Указанное значение «NaN» не может быть проанализировано или находится вне диапазона в консоли

Указанное значение «NaN» не может быть проанализировано или находится вне диапазона в консоли

#javascript #jquery

#javascript #jquery

Вопрос:

Я создаю проект exchange, мне нужно использовать jQuery / JavaScript для получения данных из опции выбора и передачи значения в URL API.

Я не получаю правильное значение, когда я запускаю свой код, я продолжаю получать указанное значение "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=659b81f02b22b218amp;pref=" targetCurrency "amp;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=659b81f02b22b218amp;pref=" baseCurrency "amp;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>

Комментарии:

1. кроме того, что «NaN» не может быть проанализировано, отображается какой-либо другой сообщение или номер строки?

2. @tsecheukfung01 значения отображаются в консоли, но дают мне неправильное значение во входном значении

3. что такое data.price

4. @chiliNUT данные.цена составляет 1 BTC = 49325,5920 долларов США

5. может кто-нибудь помочь мне найти решение этой проблемы

Ответ №1:

Удалены циклы for в ваших двух методах CurrencyConverter. Вы, по сути, перебирали значение 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=659b81f02b22b218amp;pref=" targetCurrency "amp;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=659b81f02b22b218amp;pref=" baseCurrency "amp;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>