javascript - jQuery货币计算器

我正在尝试使用jQuery做一个快速的货币计算器，但是出了点问题，它得到的值是'NaN'。

我已经尝试通过几种方式来理解它，但不幸的是，这没有帮助，我在下面向您发送了我的代码。

$(document).ready(function() {
  var total = 0;
  $("#amountin,#amountouy").on("change", function() {
    var amountinval = $("#amountin").val();
    var amountoutval = $("#amountout").val();
    function2(amountinval, amountoutval);
  });


  function function2(val1, val2) {
    $('#amountValue').on('keyup', function() {
      var total = 0;
      $('#amountValue').each(function(i, v) {

        var amountValue = $(v).val().length > 0 ? $(v).val() : 0;
        console.log(amountValue, val1, val2)
        total = parseInt(amountValue * val1 * val2);
      });
      $('#totalvalue').text(total);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row align-items-center">
  <div class="col-lg-3">
    <label for="inlineFormInput" class="converter-label-form">Kwota</label>
    <input type="number" class="form-control converter-input-form" id="amountValue" name="amountValue" aria-describedby="numberHelp" placeholder="100">
  </div>
  <div class="col-lg-9">
    <label class="converter-label-form" for="amountin">Przelicz z:</label>
    <select class="custom-select converter-input-form input" id="amountin" name="amountin">
      <option>Wybierz</option>
      <option value="0,1528" data-value="0,1528" data-symbol="EUR">Euro</option>
      <option value="1" data-value="1" data-symbol="PLN">Polski złoty</option>
    </select>
  </div>
</div>
<div class="form-row align-items-end">
  <div class="col-lg-8">
    <label class="converter-label-form" for="amountout">Przelicz na:</label>
    <select class="custom-select converter-input-form" id="amountout" name="amountout">
      <option>Wybierz</option>
      <option value="0,1528" data-value="0,1528" data-symbol="EUR">Euro</option>
      <option value="1" data-value="1" data-symbol="PLN">Polski złoty</option>
    </select>
  </div>
  <div class="col-lg-4">
    <div id="totalvalue" name="totalvalue"></div>
  </div>
</div>

最佳答案

$(document).ready(function(){
  var total = 0;
    $("#amountin , #amountout , #amountValue").on("change",function(){
       cal();
    });
    $("#exchange").on("click",function(){
        var amountinval = $("#amountin").val();
        var amountoutval = $("#amountout").val();
        $("#amountout").val(amountinval);
        $("#amountin").val(amountoutval);
        cal();
    });
function cal()
{
  var amountinval = $("#amountin").val();
  var amountoutval = $("#amountout").val();
  var amountValue = $("#amountValue").val();
  //console.log(amountValue, amountoutval, amountinval)
  $('#amout').text(amountValue +' ' +$( "#amountin option:selected" ).text());
  $('#totalvalue').text(amountinval/amountoutval*amountValue  +' ' +$( "#amountout option:selected" ).text());
}


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-row align-items-center">
    <div class="col-lg-3">
        <label for="inlineFormInput" class="converter-label-form">Kwota</label>
        <input type="number" class="form-control converter-input-form" id="amountValue" name="amountValue" aria-describedby="numberHelp" placeholder="100">
    </div>
    <div class="col-lg-9">
        <label class="converter-label-form" for="amountin">Przelicz z:</label>
        <select class="custom-select converter-input-form input" id="amountin" name="amountin">
          <option value="1" >USD</option>
            <option value="1.09" >Euro</option>
            <option value=".24">Polski złoty</option>
        </select>
    </div>
</div>
<div class="form-row align-items-end">
    <div class="col-lg-8">
        <label class="converter-label-form" for="amountout">Przelicz na:</label>
        <select class="custom-select converter-input-form" id="amountout" name="amountout">
            <option value="1" >USD</option>
            <option value="1.09" >Euro</option>
            <option value=".24">Polski złoty</option>
        </select>
    </div>

    <button id="exchange" aria-label="Invert currencies" class="OldButton-jvvAjr InverseButton-bUiBpw gyMxCe converterform-inverseButton inverseButton" type="button"><svg width="50px" height="47px" viewBox="0 0 50 47" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-label="Inverse button" role="img"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-297.000000, -595.000000)" fill="#000"><g transform="translate(50.000000, 394.000000)"><g transform="translate(247.000000, 201.000000)"><g transform="translate(7.142857, 25.000000)"><polygon points="42.7539856 10.9773747 19.455409 0 19.455409 7.87415338 0 7.87415338 0 14.080596 19.455409 14.080596 19.455409 21.9547493"></polygon></g><g transform="translate(21.428571, 11.309524) rotate(-180.000000) translate(-21.428571, -11.309524) "><polygon points="42.7539856 10.9773747 19.455409 0 19.455409 7.87415338 0 7.87415338 0 14.080596 19.455409 14.080596 19.455409 21.9547493"></polygon></g></g></g></g></g></svg></button>
    <div class="col-lg-4">
        <span id="amout" name="totalvalue"></span> equals  <span id="totalvalue" name="totalvalue"></span>
    </div>
</div>