我下面有一个表单，用户在字段上输入一些东西，其他字段将自动填入公式。 但是，jQuery似乎给出了错误的计算，并将输入值作为字符串读取，这可能是它给出错误计算的原因。
我一直在寻找解决方案，但parseint和number()似乎不起作用。
也可能是我做错了。
如果您键入5，10和20，请检查下面的代码段。 它给出了1.9和190，而不是2.4和240（正确答案）。
null
$('form').on('change', 'input[type="number"]', validate);
nutrition = $('input[name="nutrition"]').val();
carbs = $('input[name="carbs"]').val();
proteins = $('input[name="proteins"]').val();
fats = $('input[name="fats"]').val();
validate();
function validate() {
if (($('input[name="nutrition"]').val() != "") &&
($('input[name="carbs"]').val() != "") &&
($('input[name="proteins"]').val() != "") &&
($('input[name="fats"]').val() != "")) {
var nutrition = $('input[name="nutrition"]').val();
var carbs = $('input[name="carbs"]').val();
var proteins = $('input[name="proteins"]').val();
var fats = $('input[name="fats"]').val();
$('input[name="tcarbs"]').val(carbs / nutrition);
$('input[name="tproteins"]').val(proteins / nutrition);
$('input[name="tfats"]').val(fats / nutrition);
var unitcalories = (Number(carbs) / Number(nutrition) * 4) + (Number(proteins) / Number(nutrition) * 4) + (Number(fats) / Number(nutrition) * 9);
var tcalories = Number(unitcalories) * Number(nutrition);
$('input[name="calories"]').val(unitcalories);
$('input[name="tcalories"]').val(tcalories);
} else {
$('input[name="tcarbs"]').val('');
$('input[name="tproteins"]').val('');
$('input[name="tfats"]').val('');
}
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
<form>
<div class="form-group">
<label>Nutrition Chart Serving Size</label>
<input type="number" class="form-control" name="nutrition" value="100" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" placeholder="Serving Size">
</div>
<div class="row">
<div class="form-group col-sm-3">
<label>Net Carbs</label>
<input type="number" class="form-control " name="proteins" placeholder="Net Carbs" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3">
<label>Proteins</label>
<input type="number" class="form-control " name="fats" placeholder="Proteins" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Total Fats</label>
<input type="number" class="form-control " name="carbs" placeholder="Total Fats" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Unit Calories</label>
<input type="number" class="form-control " name="calories" placeholder="Unit Calories" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
</div>
<div class="row">
<div class="form-group col-sm-3">
<input type="number" class="form-control " name="tproteins" placeholder="" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
<div class="form-group col-sm-3">
<input type="number" class="form-control " name="tfats" placeholder="" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
<div class="form-group col-sm-3 ">
<input type="number" class="form-control " name="tcarbs" placeholder="" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
<div class="form-group col-sm-3 ">
<input type="number" class="form-control " name="tcalories" placeholder="kCal / Serving Size" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
</div>
</form>null
也许你是这个意思
干:不要重复你自己
null
function validate() {
const nutrition = +$('input[name="nutrition"]').val(),
carbs = +$('input[name="carbs"]').val(),
proteins = +$('input[name="proteins"]').val(),
fats = +$('input[name="fats"]').val();
// or $("[type=number]").val(0); for example
$('input[name="tcarbs"]').val('');
$('input[name="tproteins"]').val('');
$('input[name="tfats"]').val('');
$('input[name="calories"]').val("");
$('input[name="tcalories"]').val("");
if (nutrition != "" && nutrition != 0 && carbs != "" && proteins && fats != "") {
const tcarbs = carbs / nutrition;
const tproteins = proteins / nutrition;
const tfats = fats / nutrition;
$('input[name="tcarbs"]').val(tcarbs.toFixed(2));
$('input[name="tproteins"]').val(tproteins.toFixed(2));
$('input[name="tfats"]').val(tfats.toFixed(2));
var unitcalories = (carbs / nutrition * 4) + (proteins / nutrition * 4) + (fats / nutrition * 9);
var tcalories = unitcalories * nutrition;
$('input[name="calories"]').val(unitcalories.toFixed(2));
$('input[name="tcalories"]').val(tcalories.toFixed(2));
}
};
$(function() {
$('form').on('change', 'input[type="number"]', validate);
validate(); // initial run
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
<form>
<div class="form-group">
<label>Nutrition Chart Serving Size</label>
<input type="number" class="form-control" name="nutrition" value="100" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" placeholder="Serving Size">
</div>
<div class="row">
<div class="form-group col-sm-3">
<label>Net Carbs</label>
<input type="number" class="form-control " name="proteins" placeholder="Net Carbs" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3">
<label>Proteins</label>
<input type="number" class="form-control " name="fats" placeholder="Proteins" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Total Fats</label>
<input type="number" class="form-control " name="carbs" placeholder="Total Fats" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Unit Calories</label>
<input type="number" class="form-control " name="calories" placeholder="Unit Calories" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
</div>
<div class="row">
<div class="form-group col-sm-3">
<input type="number" class="form-control " name="tproteins" placeholder="" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
<div class="form-group col-sm-3">
<input type="number" class="form-control " name="tfats" placeholder="" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
<div class="form-group col-sm-3 ">
<input type="number" class="form-control " name="tcarbs" placeholder="" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
<div class="form-group col-sm-3 ">
<input type="number" class="form-control " name="tcalories" placeholder="kCal / Serving Size" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
</div>
</form>
输入中有错误的名称
而不是:
<div class="form-group col-sm-3">
<label>Net Carbs</label>
<input type="number" class="form-control " name="proteins" placeholder="Net Carbs" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3">
<label>Proteins</label>
<input type="number" class="form-control " name="fats" placeholder="Proteins" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Total Fats</label>
<input type="number" class="form-control " name="carbs" placeholder="Total Fats" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
应该是:
<div class="form-group col-sm-3">
<label>Net Carbs</label>
<input type="number" class="form-control " name="carbs" placeholder="Net Carbs" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3">
<label>Proteins</label>
<input type="number" class="form-control " name="proteins" placeholder="Proteins" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Total Fats</label>
<input type="number" class="form-control " name="fats" placeholder="Total Fats" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
您为每个输入表单写错了名称。
检查以下内容:
错误:
<div class="row">
<div class="form-group col-sm-3">
<label>Net Carbs</label>
<input type="number" class="form-control " name="proteins" placeholder="Net Carbs" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3">
<label>Proteins</label>
<input type="number" class="form-control " name="fats" placeholder="Proteins" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Total Fats</label>
<input type="number" class="form-control " name="carbs" placeholder="Total Fats" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Unit Calories</label>
<input type="number" class="form-control " name="calories" placeholder="Unit Calories" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
</div>
已修复:
<div class="row">
<div class="form-group col-sm-3">
<label>Net Carbs</label>
<input type="number" class="form-control " name="carbs" placeholder="Net Carbs" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3">
<label>Proteins</label>
<input type="number" class="form-control " name="proteins" placeholder="Proteins" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Total Fats</label>
<input type="number" class="form-control " name="fats" placeholder="Total Fats" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" required="">
</div>
<div class="form-group col-sm-3 ">
<label>Unit Calories</label>
<input type="number" class="form-control " name="calories" placeholder="Unit Calories" onkeyup="if(parseInt(this.value)>500){ this.value =500; return false; } if(parseInt(this.value)<0){ this.value =0; return false; }" readonly>
</div>
</div>
