使用 jQuery 的货币计算器

Question

我正在尝试使用 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>

Answer 1

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

Answer 2

我认为您的代码中几乎没有问题。1.<option value="0,1528" data-value="0,1528" data-symbol="EUR">Euro</option> 这里 0,1528 应该是 0.1528。2.“Wybierz”没有任何价值。我认为 Wybierz 的意思是选择。所以你可以在这里使用disabled。使用以下代码。我认为它会起作用。

HTML：

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

jQuery：

$(document).ready(function() {

  var total = 0;

  $("#amountin,#amountouy,#amountValue").on("change", function() {

    calculate();

  });

  function calculate(){

    let total = 0;

    let amountinval = $("#amountin").val();

    let amountoutval = $("#amountout").val();

    let amountValue = $("#amountValue").val();

    console.log(amountinval + " " +amountoutval + " " +amountValue);

    total = parseInt(amountinval * amountoutval * amountValue);

    $('#totalvalue').text(total);

  }

});

更新：

    <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 disabled>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 disabled>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 class="converter-score__value">

                                        <!-- <span>100 UAH = 0.08 PLN</span> -->

                                        <span id="amountValueInput"></span> 

                    <span id="amountValueInputInSymbol"></span> = 

                    <span id="totalvalue" name="totalvalue"></span> 

                    <span id="amountValueInputOutSymbol"></span>

                                    </div>

  </div>

</div>

jQuery：

    $(document).ready(function() {

  var total = 0;

  $("#amountin,#amountouy,#amountValue").on("change", function() {

    calculate();

  });

  function calculate(){

    let total = 0;

    let amountinval = $("#amountin").val();

    let amountoutval = $("#amountout").val();

    let amountValue = $("#amountValue").val();

    let amountoutvalSym = $("#amountout").find(':selected').data("symbol"); 

    let amountinvalSym = $("#amountin").find(':selected').data("symbol"); 

    console.log(parseFloat(amountinval));

    total = parseInt(amountinval * amountoutval * amountValue);

    $('#amountValueInput').text(amountValue);

    $('#amountValueInputInSymbol').text(amountinvalSym);

    $('#totalvalue').text(total);

    $('#amountValueInputOutSymbol').text(amountoutvalSym);

  }

});