The specified value "NaN" cannot be parsed, or is out of range in the console

user_12719082 0
Viewed 874

I am building an exchange project, I need to use jQuery/JavaScript to get data from a select option and pass the value to an API URL.

I don't get the right value when I run my code I keep getting The specified value "NaN" that cannot be parsed, or is out of range in the console, what am I doing wrong here. can someone help me check this code?

Here is my code:

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

jquery javascript
1 Answers

Removed the for loops in your two currencyConverter methods. You were essentially iterating over your data.price value so when it got to the decimal point in the value '.' it failed since '.' is not a number (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>

user_45660520
Related