带有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>

我认为您的代码中很少有问题。1.<option value="0,1528" data-value="0,1528" data-symbol="EUR">Euro</option>这里01528应该是0.1528。2."怀比尔兹"没有任何价值。我认为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);
}
});

相关内容

最新更新

热门标签：