[英]How can I add 3 variables if one or two may not have a value?
I have 3 variables that are fed from a form input ( type="text"
). 我有3个变量从表单输入(
type="text"
)提供。 Each input may or may not be entered by a user. 用户可以输入或不输入每个输入。 I just want to add the variables together if they have any values entered.
我只想在输入任何值时将变量添加到一起。 The problem is if any of them are left blank on the form I get NaN returned.
问题是如果他们中的任何一个在我获得NaN返回的表单上留空。
I really enjoy figuring these things out but I haven't been able to Google my issue, I'm happy to just be told what to Google to figure this out. 我真的很喜欢把这些东西搞清楚,但是我无法将谷歌问题解决,我很高兴能告诉谷歌如何解决这个问题。
function extrasCalc() {
var grub = 0;
var lime = 0;
var aerseed = 0;
grub = parseInt(document.getElementById("grubprice").value);
lime = parseInt(document.getElementById("limeprice").value);
aerseed = parseInt(document.getElementById("aerseedprice").value);
var extrasSubtotal = grub + lime + aerseed;
document.getElementById("sub").value = extrasSubtotal;
console.log(grub);
console.log(lime);
console.log(aerseed);
console.log(extrasSubtotal);
}
If only 1 or 2 of the variables have a value, I would like them to be totaled. 如果只有1或2个变量有值,我希望它们合计。 So far all 3 have to have a value for the function to work.
到目前为止,所有3个必须具有该功能的值才能工作。
You could ensure that the values are valid this way: 您可以通过以下方式确保值有效:
function extrasCalc() {
var grub = +document.getElementById("grubprice").value || 0;
var lime = +document.getElementById("limeprice").value || 0;
var aerseed = +document.getElementById("aerseedprice").value || 0;
var extrasSubtotal = grub + lime + aerseed;
document.getElementById("sub").value = extrasSubtotal;
console.log(grub);
console.log(lime);
console.log(aerseed);
console.log(extrasSubtotal);
}
Basically grub
, lime
and aerseed
are assigned 0
s, if their corresponding expressions evaluate to "falsy" values. 基本上
grub
, lime
和aerseed
被指定为0
s,如果它们的相应表达式评估为“falsy”值。
As a bonus, you could replace parseInt
with +
prefix, which does the same job and is a bit terser. 作为奖励,你可以用
+
前缀代替parseInt
,它可以完成同样的工作并且有点粗略。
to avoid empty string "" Try this : 避免空字符串“”试试这个:
grub = +document.getElementById("grubprice").value || 0;
lime = +document.getElementById("limeprice" .value || 0;
aerseed = +document.getElementById("aerseedprice" ).value || 0;
To achieve expected result, use eblow option of checking whether value is valid or not and parseInt value if available 要获得预期结果,请使用eblow选项检查值是否有效以及parseInt值(如果可用)
function extrasCalc() { var grub = 0; var lime = 0; var aerseed = 0; grub = document.getElementById("grubprice").value; lime = document.getElementById("limeprice").value; aerseed = document.getElementById("aerseedprice").value; grub = grub? parseInt(grub) : 0; lime = lime? parseInt(lime): 0; aerseed = aerseed? parseInt(aerseed): 0; var extrasSubtotal = grub + lime + aerseed; document.getElementById("sub").value = extrasSubtotal; console.log(grub); console.log(lime); console.log(aerseed); console.log(extrasSubtotal); }
<input type = "text" id = 'grubprice'> <input type = "text" id = 'limeprice'> <input type = "text" id = 'aerseedprice'> <button onclick="extrasCalc()">Add</button><br> Total <input type = "text" id = 'sub'>
codepen - https://codepen.io/nagasai/pen/gNVvYX codepen - https://codepen.io/nagasai/pen/gNVvYX
It sounds like you need to add a function that will default your input to zero if no value is given. 听起来你需要添加一个函数,如果没有给出值,则将输入默认为零。
function extrasCalc() {
var grub = defaultInputToZero( parseInt(document.getElementById("grubprice").value) );
var lime = defaultInputToZero( parseInt(document.getElementById("limeprice").value) );
var aerseed = defaultInputToZero( parseInt(document.getElementById("aerseedprice").value) );
var extrasSubtotal = grub + lime + aerseed;
document.getElementById("sub").value = extrasSubtotal;
console.log(grub);
console.log(lime);
console.log(aerseed);
console.log(extrasSubtotal);
}
function defaultInputToZero(inputValue){
if( isNaN(inputValue) ){
return 0;
}
return inputValue;
}
Maybe you can try this as well :) 也许你也可以尝试这个:)
function extrasCalc() {
var grub = 0;
var lime = 0;
var aerseed = 0;
grub = parseInt(document.getElementById("grubprice").value) ? parseInt(document.getElementById("grubprice").value) : 0;
lime = parseInt(document.getElementById("limeprice").value) ? parseInt(document.getElementById("limeprice").value) : 0;
aerseed = parseInt(document.getElementById("aerseedprice").value) ? parseInt(document.getElementById("aerseedprice").value) : 0;
var extrasSubtotal = grub + lime + aerseed;
document.getElementById("sub").value = extrasSubtotal;
console.log(grub);
console.log(lime);
console.log(aerseed);
console.log(extrasSubtotal);
}
Try 尝试
function extrasCalc() { let grub = +grubprice.value; let lime = +limeprice.value; let aerseed = +aerseedprice.value; sub.value = grub + lime + aerseed; }
<input type="text" id="grubprice" > <input type="text" id="limeprice" > <input type="text" id="aerseedprice" > <br><br><button onclick="extrasCalc()">Calc</button><br><br> <input id="sub" >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.