如何使用输入标记来获取用户输入并使用 javascript 返回值

Question

我正在尝试制作一个预算计算器，该计算器接受用户输入的不同变量并在计算后返回一个新值。

我尝试使用输入标签来检索不同变量的值，并使用 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 标签"result"

Answer 1

输入值的类型为字符串。在执行任何算术运算之前，您必须将它们转换为数字。您可以使用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>

Answer 2

您忘了添加文档。

以前：

 entertainment = getElementById("entertainment").value;
 spending = getElementById("spending").value;

现在：（改成这个）

entertainment = document.getElementById("entertainment").value;
spending = document.getElementById("spending").value;