CODEWITHSUNDEEP
javascripthtml
JohnSal
JohnSal

Reputation: 11

Need help creating a working HTML form that calculates ROI

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>

Upvotes: 0

Views: 738

Answers (3)

undrftd
undrftd

Reputation: 331

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>

Upvotes: 0

myelxx
myelxx

Reputation: 402

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>

Upvotes: 1

Gurami
Gurami

Reputation: 82

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">

Upvotes: 0

Related Questions