Валютный калькулятор с 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

Я думаю, что в вашем коде мало проблем. 1. <option value="0,1528" data-value="0,1528" data-symbol="EUR">Euro</option> Здесь 0,1528 должно быть 0,1528. 2. «Wybierz» не имеет никакой ценности. Я думаю, что Wybierz означает выбор. Так что вы можете использовать отключено здесь. Используйте следующий код. Я думаю, что он будет работать.

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);
  }
});

Answer 2

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