Need help creating a working HTML form that calculates ROI
Question
I'm trying to create an HTML form that has the user type in expected gain and cost into the input box, click calculate, and the form should calculate and display the net profit and ROI.
So far the form lets me input expected gain and cost, but the calculate button doesn't display the net profit and ROI in the appropriate boxes.
This is what I have so far (only relevant portions included):
// Declare variables var projectName; // Gets user input for project name var expectedCost; // Gets user input for cost of project var expectedGain; // Gets user input for expected gain var netProfit; var returnOnInvestment; function calcNetProfit() { netProfit = expectedGain - expectedCost; // Calculate net profit } function calcReturnOnInvestment() { returnOnInvestment = netProfit / expectedCost * 100; // Calculate Return on Investment }
<form> <label>Project Name</label> <input> <br><br> <label>Cost</label> <input> <br><br> <label>Gain</label> <input> <br><br> <label>Net Profit</label> <input> <br><br> <label>ROI as percentage</label> <input> <br><br> <input type="button" name="calculate" value="Calculate" onclick="calcNetProfit(); calcReturnOnInvestment();"/><br /> </form>
3 answers
solution1
1 2019-10-13 23:14:31
Try to get the value of input type using: document.getElementById("demo").value , and you can also manipulate the input box using the same line of code:
function calc() { var projectName = document.getElementById("name").value var expectedCost = document.getElementById("cost").value var expectedGain = document.getElementById("gain").value var netProfit = expectedGain - expectedCost; document.getElementById("netprofit").value = netProfit; var returnOnInvestment = netProfit / expectedCost * 100; document.getElementById("roi").value = returnOnInvestment; }
<form> <label>Project Name</label> <input type="text" id="name"> <br><br> <label>Cost</label> <input type="text" id="cost"> <br><br> <label>Gain</label> <input type="text"id="gain"> <br><br> <label>Net Profit</label> <input type="text" id="netprofit"> <br><br> <label>ROI as percentage</label> <input type="text" id="roi"> <br><br> <input type="button" name="calculate" value="Calculate" onclick="calc();"/><br /> </form>
solution2
0 2019-10-13 22:57:18
to get input value you must use
var projectname = document.querySelector('//id
or class of input id
mustbe #idname and class .classname').value;
and then manipulate with thouse values
also input tag must have type and class or id
<input type="number" class="classname">
solution3
0 ACCPTED 2019-10-13 22:58:18
You are missing the steps on how to get the values for the gain, costs, and net profit. Read on JavaScript DOM.
Here's the answer in a nutshell.
function calcNetProfit() { var expectedGain = document.getElementById('gain').value; var expectedCost = document.getElementById('cost').value; var netProfit = expectedGain - expectedCost; document.getElementById('netprofit').value = netProfit; return netProfit; } function calcReturnOnInvestment() { var expectedCost = document.getElementById('cost').value; var netProfit = calcNetProfit(); var roi = netProfit / expectedCost * 100; // Calculate Return on Investment document.getElementById('roi').value = roi; }
<html> <form> <label>Project Name</label> <input> <br><br> <label>Cost</label> <input id="cost"> <br><br> <label>Gain</label> <input id="gain"> <br><br> <label>Net Profit</label> <input id="netprofit"> <br><br> <label>ROI as percentage</label> <input id="roi"> <br><br> <input type="button" name="calculate" value="Calculate" onclick="calcNetProfit(); calcReturnOnInvestment();" /><br /> </form> </html>
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.