如何使用输入标签接受用户输入并返回带有javascript的值？
如何使用输入标签接受用户输入并返回带有javascript的值？
提问于 2018-12-24 04:04:09
我正在尝试制作一个预算计算器，它接受不同变量的用户输入，并在计算后返回一个新值。
我尝试使用输入标记来检索不同变量的值，并使用javascript函数来计算结果，该函数将结果显示为另一个输入标记的值。我对编程很陌生，所以我不确定这是否是正确的方法。
var inc, rent, vloan, hins, vins, cc, loan, food, gas, entertainment, spending, result;
function calculate() {
inc = document.getElementById("income").value;
rent = document.getElementById("rent").value;
vloan = document.getElementById("vloan").value;
hins = document.getElementById("hinsurance").value;
vins = document.getElementById("vinsurance").value;
cc = document.getElementById("creditcard").value;
loan = document.getElementById("loan").value;
food = document.getElementById("food").value;
gas = document.getElementById("gas").value;
entertainment = getElementById("entertainment").value;
spending = getElementById("spending").value;
return document.getElementById("result").value = inc - rent - vloan - hins - vins - cc - loan - food - gas - entertainment - spending;
}<div id="form2">
Enter your income:<br>
<input type="text" id="income"><br> Mortgage/Rent:<br>
<input type="text" id="rent"><br> Vehicle Loan:<br>
<input type="text" id="vloan"><br> Home Insurance:<br>
<input type="text" id="hinsurance"><br> Vehicle Insurance:<br>
<input type="text" id="vinsurance"><br> Credit Card:<br>
<input type="text" id="creditcard"><br> Other Loans:<br>
<input type="text" id="loan"><br> Groceries:<br>
<input type="text" id="food"><br> Gas/Public Transport:<br>
<input type="text" id="gas"><br> Cable/Internet:<br>
<input type="text" id="entertainment"><br> Spending Money:<br>
<input type="text" id="spending"><br>
<button id="cb" onclick="calculate()">Calculate</button>
<div id="answer">
<p>It is suggested that 20% of your income be allocated towards a savings account</p>
<input id="result" type="text" value="">
</div>
</div>
我预期算术操作后的结果将显示在最后一个输入框中，并带有id标记“结果”。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-24 04:07:32
输入值为字符串类型。在执行任何算术操作之前，必须将它们转换为数字。您可以使用parseFloat()。
inc = parseFloat(document.getElementById("income").value);
.....
.....您还忘记在以下语句中引用document对象：
entertainment = getElementById("entertainment").value;
spending = getElementById("spending").value;您也不需要从函数中返回任何内容。
工作代码示例：
var inc, rent, vloan, hins, vins, cc, loan, food, gas, entertainment, spending, result;
function calculate(){
inc = parseFloat(document.getElementById("income").value);
rent = parseFloat(document.getElementById("rent").value);
vloan = parseFloat(document.getElementById("vloan").value);
hins = parseFloat(document.getElementById("hinsurance").value);
vins = parseFloat(document.getElementById("vinsurance").value);
cc = parseFloat(document.getElementById("creditcard").value);
loan = parseFloat(document.getElementById("loan").value);
food = parseFloat(document.getElementById("food").value);
gas = parseFloat(document.getElementById("gas").value);
entertainment = parseFloat(document.getElementById("entertainment").value);
spending = parseFloat(document.getElementById("spending").value);
document.getElementById("result").value = inc - rent - vloan - hins - vins - cc - loan - food - gas - entertainment - spending;
}<div id="form2">
Enter your income:<br>
<input type="text" id="income"><br>
Mortgage/Rent:<br>
<input type="text" id="rent"><br>
Vehicle Loan:<br>
<input type="text" id="vloan"><br>
Home Insurance:<br>
<input type="text" id="hinsurance"><br>
Vehicle Insurance:<br>
<input type="text" id="vinsurance"><br>
Credit Card:<br>
<input type="text" id="creditcard"><br>
Other Loans:<br>
<input type="text" id="loan"><br>
Groceries:<br>
<input type="text" id="food"><br>
Gas/Public Transport:<br>
<input type="text" id="gas"><br>
Cable/Internet:<br>
<input type="text" id="entertainment"><br>
Spending Money:<br>
<input type="text" id="spending"><br>
<button id="cb" onclick="calculate()">Calculate</button>
<div id="answer">
<p>It is suggested that 20% of your income be allocated towards a savings account</p>
<input id="result" type="text" value="">
</div>
Stack Overflow用户
发布于 2018-12-24 04:14:36
忘记添加文档.
在此之前：
entertainment = getElementById("entertainment").value;
spending = getElementById("spending").value;现在：(换成这个)
entertainment = document.getElementById("entertainment").value;
spending = document.getElementById("spending").value;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53909070
复制相关文章
相似问题
腾讯云开发者
