使用 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>
绝地无双浏览 68回答 2
2回答
-
aluckdog
$(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> 这里 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); }});
随时随地看视频慕课网APP
相关分类
Html5