时间戳

首页 > 解决方案 > 在另一个字段中输入后自动获取值

javascript - 在另一个字段中输入后自动获取值

问题描述

我正在尝试创建一个 usd 到 inr 转换器，但问题是当我在一个字段中输入时它不会自动在另一个字段中转换。我尝试使用 onblur 但只有当我使用我的键来增加或减少时它才起作用作为数字字段，它正在工作。我不知道是什么导致只有按键起伏起作用。

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

                <br>
                <div class="form-group">
                    <input type="number" class="form-control" id="baseNumber" value="1" onblur="curr()">
                </div>
                <label for="Target Currency">Target Currency</label>
 
                <br>
                <div class="form-group">
                    <input  class="form-control" id="targetNumber">
                </div>
            </form>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="script.js"></script>
</html>

我希望在基本字段中输入后立即将结果自动显示在另一个字段中。请帮助

function curr(){
  // some variables

  var baseCurrency = 'USD';

  var baseNumber = 1;

  var targetCurrency = 'INR';

  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://api.exchangeratesapi.io/latest?symbols="+targetCurrency+"&base="+baseCurrency

      // make a get request to api

    

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

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

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

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

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

      url = "https://api.exchangeratesapi.io/latest?symbols="+baseCurrency+"&base="+targetCurrency

      // make a get request to api

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

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

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

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

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

标签： javascriptjquery

解决方案

当我构建历史汇率货币转换器时，我在项目中遇到了同样的问题您可以通过在输入 html 标记中使用 onkeyup 事件来执行下面的代码。希望它对你有很大帮助。

var amountBTC = document.getElementById("amountBTC");
var amountUSD = document.getElementById("amountUSD");
var amountNGN = document.getElementById("amountNGN");

var currentRateUSD = 1.0;
var currentRateNGN = 385.69;
var currentRateBTC = 0.000094; 


function convertAmount(currency) {


    var x = document.getElementById("selection").selectedIndex;
    var y = document.getElementById("selection").options;

    if(y[x].text == "Sell"){

        var BTC = parseFloat(currentRateBTC);
        var NGN = parseFloat(currentRateNGN);
        var USD = parseFloat(currentRateUSD);



        fx.base = "USD";
        fx.rates = {
            "BTC" : BTC,
            "NGN" : NGN,
            "USD" : USD
        }

        if (currency == "BTC"){
            amountUSD.value = fx.convert(amountBTC.value, {from: "BTC", to: "USD"});
            amountNGN.value = fx.convert(amountBTC.value, {from: "BTC", to: "NGN"});
        }else if (currency == "USD"){
            amountBTC.value = fx.convert(amountUSD.value, {from: "USD", to: "BTC"});
            amountNGN.value = fx.convert(amountUSD.value, {from: "USD", to: "NGN"});
        }else if (currency == "NGN"){
            amountUSD.value = fx.convert(amountNGN.value, {from: "NGN", to: "USD"});
            amountBTC.value = fx.convert(amountNGN.value, {from: "NGN", to: "BTC"});
        }

    }else if(y[x].text == "Buy"){

        var BTC = parseFloat(currentRateBTC);
        var NGN = parseFloat(currentRateNGN);
        var USD = parseFloat(currentRateUSD);


        fx.base = "USD";
        fx.rates = {
            "BTC" : BTC,
            "NGN" : NGN,
            "USD" : USD
        }

        if (currency == "BTC"){
            amountUSD.value = fx.convert(amountBTC.value, {from: "BTC", to: "USD"});
            amountNGN.value = fx.convert(amountBTC.value, {from: "BTC", to: "NGN"});
        }else if (currency == "USD"){
            amountBTC.value = fx.convert(amountUSD.value, {from: "USD", to: "BTC"});
            amountNGN.value = fx.convert(amountUSD.value, {from: "USD", to: "NGN"});
        }else if (currency == "NGN"){
            amountUSD.value = fx.convert(amountNGN.value, {from: "NGN", to: "USD"});
            amountBTC.value = fx.convert(amountNGN.value, {from: "NGN", to: "BTC"});
        }
    }

}

function convertAmountToBTC_USD_NGN(from, to, amount) {
    var convertedAmount = (to/from)*amount;
    return convertedAmount;
}

function calculatePercent(percent, num){
    return (percent / 100) * num;
}


(function(root, undefined) {

    var fx = function(obj) {
        return new fxWrapper(obj);
    };


    fx.version = '0.2';


    var fxSetup = root.fxSetup || {
        rates : {},
        base : ""
    };

    fx.rates = fxSetup.rates;

    fx.base = fxSetup.base;

    fx.settings = {
        from : fxSetup.from || fx.base,
        to : fxSetup.to || fx.base
    };


    var convert = fx.convert = function(val, opts) {

        if (typeof val === 'object' && val.length) {
            for (var i = 0; i< val.length; i++ ) {
                val[i] = convert(val[i], opts);
            }
            return val;
        }


        opts = opts || {};

        if( !opts.from ) opts.from = fx.settings.from;
        if( !opts.to ) opts.to = fx.settings.to;

        return val * getRate( opts.to, opts.from );
    };

    var getRate = function(to, from) {

        var rates = fx.rates;

        rates[fx.base] = 1;

        if ( !rates[to] || !rates[from] ) throw "fx error";

        if ( from === fx.base ) {
            return rates[to];
        }

        if ( to === fx.base ) {
            return 1 / rates[from];
        }


        return rates[to] * (1 / rates[from]);
    };


    var fxWrapper = function(val) {

        if ( typeof val === "string" ) {
            this._v = parseFloat(val.replace(/[^0-9-.]/g, ""));
            this._fx = val.replace(/([^A-Za-z])/g, "");
        } else {
            this._v = val;
        }
    };

    var fxProto = fx.prototype = fxWrapper.prototype;

    fxProto.convert = function() {
        var args = Array.prototype.slice.call(arguments);
        args.unshift(this._v);
        return convert.apply(fx, args);
    };

    fxProto.from = function(currency) {
        var wrapped = fx(convert(this._v, {from: currency, to: fx.base}));
        wrapped._fx = fx.base;
        return wrapped;
    };

    fxProto.to = function(currency) {
        return convert(this._v, {from: this._fx ? this._fx : fx.settings.from, to: currency});
    };


    if (typeof exports !== 'undefined') {
        if (typeof module !== 'undefined' && module.exports) {
            exports = module.exports = fx;
        }
        exports.fx = fx;
    } else if (typeof define === 'function' && define.amd) {

        define([], function() {
            return fx;
        });
    } else {

        fx.noConflict = (function(previousFx) {
            return function() {

                root.fx = previousFx;

                fx.noConflict = undefined;

                return fx;
            };
        })(root.fx);

        root['fx'] = fx;
    }

}(this));
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<body>
            
     <div class="container">
    <div class="content-area">

        <article id="post-4007" class="post-4007 page type-page status-publish hentry">

    <div class="entry-content">
                    
    <div class="vc_row wpb_row vc_row-fluid">
                        
<div class="wpb_column vc_column_container vc_col-sm-12">
    <div class="vc_column-inner ">
        <div class="wpb_wrapper">
                        <div role="form" class="wpcf7" id="wpcf7-f2650-p4007-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response" aria-live="polite"></div>
<form method="post" class="wpcf7-form" novalidate="novalidate">
<p><label> Buy or Sell (required) <span class="wpcf7-form-control-wrap sellorbuy"><select id="selection" name="Buy-or-Sell" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="Sell">Sell</option><option value="Buy">Buy</option></select></span></label></p>

<p><label> Amount in USD <span class="wpcf7-form-control-wrap AmounttoPayinUSD">
    <input type="number" name="Amount-in-USD" id="amountUSD" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" aria-invalid="false" onkeyup="convertAmount('USD')" />
</span> </label></p>
<p><label> Amount  in Naira <span class="wpcf7-form-control-wrap AmounttoPayinNaira">
    <input type="number" name="Amount-in-Naira" id="amountNGN" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" aria-invalid="false" onkeyup="convertAmount('NGN')" />
</span> </label></p>
<p><label> Amount in Bitcoin <span class="wpcf7-form-control-wrap BuyingAmountBITCOIN">
    <input type="text" name="Amount-in-Bitcoin" id="amountBTC" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onkeyup="convertAmount('BTC')" />
</span></label></p>
<div class="wpcf7-response-output wpcf7-display-none" aria-hidden="true"></div></form></div>        </div>
    </div>
</div>    </div>

                    </div>
    
</article>
    </div>

    </div> <!--.container-->
    </div> <!--#main-->
    </div> <!--.content_wrapper-->

        </div> <!--#wrapper-->

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/money.js/0.2.0/money.min.js?ver=0.2.0'></script>

<script src="./converter.js"></script>
</body>
</html>

推荐阅读