javascript - 如何使用输入标签获取用户输入并使用 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>