javascript - 如何将只读输入字段的值相乘并将结果显示在另一个字段中
问题描述
我有三个输入字段,当您在第一个字段中输入 BTC 金额时,它会为您提供美元等值的 BTC。然后我添加了一个隐藏的输入字段,它包含一个特定的值,比如说“460”,现在我希望以美元为单位的 BTC 等值乘以“460”并在只读输入字段中给出结果。在演示我的解释的代码下方。
$(".form-control").keyup(function() { //input[name='calc']
let convFrom;
if ($(this).prop("name") == "btc") {
convFrom = "btc";
convTo = "usd";
} else {
convFrom = "usd";
convTo = "btc";
}
$.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json",
function(data) {
var origAmount = parseFloat($("input[name='" + convFrom + "']").val());
var exchangeRate = parseInt(data.bpi.USD.rate_float);
let amount;
if (convFrom == "btc")
amount = parseFloat(origAmount * exchangeRate);
else
amount = parseFloat(origAmount / exchangeRate);
$("input[name='" + convTo + "']").val(amount.toFixed(2));
});
});
<script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<form>
<input type="number" name="btc" class="form-control" id="validationTooltip02" placeholder="BTC">
<input type="number" name="usd" class="form-control" id="a" onkeyup="add()" placeholder="USD" readonly>
对于乘法,我在 USD 字段中添加了 onkeyup 函数,
<script type="text/javascript">
function add() {
var x = parseInt(document.getElementById("a").value);
var y = parseInt(document.getElementById("b").value)
document.getElementById("c").value = x * y;
}
</script>
然后尝试使用 ID 将结果收集到一个字段中<input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly>
如果我在 USD 字段中删除 readonly 并直接键入,则此方法有效,但当它为只读时,该字段中的 BTC 到 USD 总和的结果不起作用。我希望我能够解释这一点。请帮忙,因为我不是专家。
解决方案
您正在混合在一起jQuery
,JS
理想情况下坚持使用一个以避免混淆。您不需要单独的函数将第三个输入值乘以该second
值。
您可以在API
调用函数中完成所有这些操作。除了获取decimals
您还需要toFixed()
在final
第三个输入上使用amount
。
此外,为了更好的用户体验,我建议使用更好的功能,.on
因为你有类型号。您可以通过单击增加输入来使用您的数字,新值和总数将立即反映,而不是再次使用单击或键入。input
key-up
input
increment
现场工作演示:
$("#validationTooltip02").on('input', function() { //input[name='calc']
let convFrom;
if ($(this).prop("name") == "btc") {
convFrom = "btc";
convTo = "usd";
} else {
convFrom = "usd";
convTo = "btc";
}
$.getJSON("https://api.coindesk.com/v1/bpi/currentprice/usd.json",
function(data) {
var origAmount = parseFloat($("input[name='" + convFrom + "']").val());
var exchangeRate = parseInt(data.bpi.USD.rate_float);
let amount;
if (convFrom == "btc")
amount = parseFloat(origAmount * exchangeRate);
else
amount = parseFloat(origAmount / exchangeRate);
$("input[name='" + convTo + "']").val(amount.toFixed(2));
//Add here
var a = parseFloat($('#a').val())
var b = parseFloat($('#b').val())
var final = a * b//final amount multiplied by 465
$('#c').val(final.toFixed(2))
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<form>
<input type="number" name="btc" class="form-control" id="validationTooltip02" placeholder="BTC">
<input type="number" name="usd" class="form-control" id="a" placeholder="USD" readonly>
<input type="hidden" id="b" value="465">
<input name="amount" class="form-control" type="text" placeholder="0.00000" id="c" aria-label="0.00000" readonly>
</form>
推荐阅读
- python - 为什么 Pillow 通过 ImageDraw 绘图时会反转颜色?
- java - 如何通过布尔值传递字符串?是为真,否为假?
- jenkins - Sonarqube gitlab 报告发布者未完成
- docker - E: 包 'gvfs-bin' 没有安装候选
- c# - 如何让 Unity 2D RTS 单元选择工作?
- reactjs - 在我使用 axios 做出反应的其余 Web 服务请求中,响应 json 包含 html div 元素。我怎样才能得到这个元素的值?
- html - SVG 矢量图像未显示在 HTML 元素上
- reactjs - 如何使用自定义钩子更新两个单独组件中的状态?
- django - get() 返回了多个评论 - 它返回了 2
- puppet - Puppet:如何删除目录及其中的所有内容