问题描述
我正在为我当前的Web项目创建一个计算器，它工作得非常好但是当我正在玩它时，我注意到清除第三个字段导致脚本输出NaN。
我是Javascript的新手，我试图这样做
if($('#field11').val() == '' || $('#field12').val() == '' || $('#field13').val() == ''){
$('#result1').text('')
}
但这并不能解决问题。 我已经找到了解决这个问题的方法，但就好像互联网上没有人有这样的问题！ 如果任何一个输入被清除，我需要能够清除输出（＃result1）。
这是我的完整代码：
$(document).ready(function(){
$('#field11').keyup(function(){
if($('#field12').val() != '' && $('#field13').val() != ''){
$('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
}
});
$('#field12').keyup(function(){
if($('#field11').val() != '' && $('#field13').val() != ''){
$('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
}
});
$('#field13').keyup(function(){
if($('#field11').val() != '' && $('#field12').val() != ''){
$('#result1').text(commafy(Math.round( $('#field11').val() + $('#field12').val() / $('#field13').val() * 1.5)) + ",99");
}
});
if($('#field11').val() == '' || $('#field12').val() == '' || $('#field13').val() == ''){
$('#result1').text('')
}
});
以下是JSFiddle的工作代码： ：//jsfiddle.net/x7a91bnx/
谢谢！
1楼
您可以使用DRY原则改进逻辑。
由于所有的keyup处理程序都执行相同的逻辑，因此您可以将其提取到自己的函数中。
然后在该函数中，您可以检索每个字段的值，如果它为空则将其设置为0 。
在进行计算之前，您还可以检查#field13是否有值，以避免被零除问题。
另请注意， commafy()函数也可以简化。
尝试这个：
$(document).ready(function () {
$('#field11, #field12, #field13').keyup(calculate);
});
function commafy(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
function calculate() {
var field11 = parseFloat($('#field11').val()) || 0;
var field12 = parseFloat($('#field12').val()) || 0;
var field13 = parseFloat($('#field13').val()) || 0;
var result = field13 == 0 ? 0 : commafy(Math.round(field11 + field12 / field13 * 1.5)) + ",99";
$('#result1').text(result);
}
2楼
您检查每个输入的直觉是正确的，但您必须在计算发生之前每次检查它，而不是仅在文档加载后检查一次。 例如：
$('#field13').keyup(function () {
if ($('#field11').val() !== '' || $('#field12').val() !== '' || $('#field13').val() !== '') {
$('#result1').text(commafy(Math.round(parseFloat($('#field11').val()) + parseFloat($('#field12').val()) / parseFloat($('#field13').val()) * 1.5)) + ",99");
} else {
$('#result1').text('');
}
});