Javascript 计算器 - 当相应的文本输入也为空白时,将计算器上的文本输入重置为空白
Javascript Calculator - Reset text input on calculator to be blank when corresponding text input is also blank
我有一个简单的计算器,可以更改输入以将美元转换为越南盾。它工作得很好,除了在输入数字然后通过退格键删除之后,“0.00”保留在执行计算的框中。我希望当另一个框为空白时该框为空白删除数字后。
这是我的 Javascript:
function vndCalc() {
var cusd = document.getElementById("usd").value;
var cvnd = document.getElementById("vnd");
var calc = cusd * 22477.50;
cvnd.value = calc.toFixed(2);
}
function usdCalc() {
var cusd = document.getElementById("usd");
var cvnd = document.getElementById("vnd").value;
var calc = cvnd / 22477.50;
cusd.value = calc.toFixed(2);
}
这里还有HTML:
<fieldset id=calculator>
<legend>USD to VND Calculator</legend>
<label>US Dollars:<input type="text" id="usd" oninput="vndCalc()"/></label>
<label>VN Dongs:<input type="text" id="vnd" oninput="usdCalc()"/></label>
</fieldset>
我尝试使用 "if" 函数,但我什么也做不了。请帮忙!
您可以检查输入字段是否 == "" 并将输出字段设置为相同
美元起
cvnd.value = cusd == "" ? "" : calc.toFixed(2);
以及美元
cusd.value = cvnd == "" ? "" : calc.toFixed(2);
如果你不喜欢三元形式你可以这样做
美元起
if (cusd == "") {
cvnd.value = "";
} else {
cvnd.value = calc.toFixed(2);
}
和美元
if (cvnd == "") {
cusd.value = "";
} else {
cusd.value = calc.toFixed(2);
}
您可以用条件控制另一个输入。例如,你可以试试这个:
function usdCalc() {
var cusd = document.getElementById("usd");
var cvnd = document.getElementById("vnd").value;
var calc = cvnd / 22477.50;
if (cvnd == ''){
cusd.value = '';
} else {
cusd.value = calc.toFixed(2);
}
}
我个人会添加 2 个按钮来触发转换。 Jsfiddle。
示例:
var exchangeRate = 22477.50,
usdSelector = $('#usd'),
vndSelector = $('#vnd');
$('#convert1').click(function(){
vndSelector.val(usdSelector.val() * exchangeRate);
})
$('#convert2').click(function(){
usdSelector.val(vndSelector.val() / exchangeRate);
})
$('#clear').click(function(){
usdSelector.val("");
vndSelector.val("");
})
和Html:
<fieldset id="calculator">
<legend>USD to VND Calculator</legend>
<label>US Dollars: <input type="text" id="usd"/></label>
<label>VN Dongs: <input type="text" id="vnd"/></label>
</br>
<button id="convert1">Convert Dollars to Dongs</button>
<button id="convert2">Convert Dongs to Dollars</button>
<button id="clear">Clear</button>
</fieldset>
我有一个简单的计算器,可以更改输入以将美元转换为越南盾。它工作得很好,除了在输入数字然后通过退格键删除之后,“0.00”保留在执行计算的框中。我希望当另一个框为空白时该框为空白删除数字后。
这是我的 Javascript:
function vndCalc() {
var cusd = document.getElementById("usd").value;
var cvnd = document.getElementById("vnd");
var calc = cusd * 22477.50;
cvnd.value = calc.toFixed(2);
}
function usdCalc() {
var cusd = document.getElementById("usd");
var cvnd = document.getElementById("vnd").value;
var calc = cvnd / 22477.50;
cusd.value = calc.toFixed(2);
}
这里还有HTML:
<fieldset id=calculator>
<legend>USD to VND Calculator</legend>
<label>US Dollars:<input type="text" id="usd" oninput="vndCalc()"/></label>
<label>VN Dongs:<input type="text" id="vnd" oninput="usdCalc()"/></label>
</fieldset>
我尝试使用 "if" 函数,但我什么也做不了。请帮忙!
您可以检查输入字段是否 == "" 并将输出字段设置为相同
美元起
cvnd.value = cusd == "" ? "" : calc.toFixed(2);
以及美元
cusd.value = cvnd == "" ? "" : calc.toFixed(2);
如果你不喜欢三元形式你可以这样做
美元起
if (cusd == "") {
cvnd.value = "";
} else {
cvnd.value = calc.toFixed(2);
}
和美元
if (cvnd == "") {
cusd.value = "";
} else {
cusd.value = calc.toFixed(2);
}
您可以用条件控制另一个输入。例如,你可以试试这个:
function usdCalc() {
var cusd = document.getElementById("usd");
var cvnd = document.getElementById("vnd").value;
var calc = cvnd / 22477.50;
if (cvnd == ''){
cusd.value = '';
} else {
cusd.value = calc.toFixed(2);
}
}
我个人会添加 2 个按钮来触发转换。 Jsfiddle。 示例:
var exchangeRate = 22477.50,
usdSelector = $('#usd'),
vndSelector = $('#vnd');
$('#convert1').click(function(){
vndSelector.val(usdSelector.val() * exchangeRate);
})
$('#convert2').click(function(){
usdSelector.val(vndSelector.val() / exchangeRate);
})
$('#clear').click(function(){
usdSelector.val("");
vndSelector.val("");
})
和Html:
<fieldset id="calculator">
<legend>USD to VND Calculator</legend>
<label>US Dollars: <input type="text" id="usd"/></label>
<label>VN Dongs: <input type="text" id="vnd"/></label>
</br>
<button id="convert1">Convert Dollars to Dongs</button>
<button id="convert2">Convert Dongs to Dollars</button>
<button id="clear">Clear</button>
</fieldset>