简体   繁体   中英

How to use an input tag to take user input and return a value with javascript?

I'm trying to make a budget calculator that takes user input for different variables and returns a new value after calculation.

I've tried using an input tag to retrieve values for different variables and calculate a result using a javascript function that displays returns the result as the value of another input tag. I'm new to programming so I'm not sure if this is the right way of going about this.

 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> 

I expected the result after arithmetic operation to be shown in the last input box with the id tag "result"

The input values are of type string. You have to convert them to number before performing any arithmetic operation. You can use parseFloat() .

inc = parseFloat(document.getElementById("income").value);
.....
.....

You also forgot to refer the document object in the following statements:

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

You also do not need to return anything from the function.

Working Code Example:

 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> 

You forgot to add document.

before:

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

now: (change into this)

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM