Estoy tratando de crear un formulario HTML que tenga el tipo de usuario en ganancia y costo esperados en el cuadro de entrada, haga clic en calcular, y el formulario debe calcular y mostrar el beneficio neto y el ROI.

Hasta ahora, el formulario me permite ingresar la ganancia y el costo esperados, pero el botón de cálculo no muestra el beneficio neto y el ROI en los cuadros correspondientes.

Esto es lo que tengo hasta ahora (solo se incluyen porciones relevantes):

// 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>
0
JohnSal 14 oct. 2019 a las 01:45

3 respuestas

La mejor respuesta

Te faltan los pasos sobre cómo obtener los valores para la ganancia, los costos y las ganancias netas. Leer en JavaScript DOM Manipulation.

Aquí está la respuesta en pocas palabras.

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>
0
undrftd 13 oct. 2019 a las 23:05

Para obtener el valor de entrada debe usar

 var projectname =  document.querySelector('//id 
or class of input id 
mustbe #idname and class .classname').value;

Y luego manipular con esos valores

También la etiqueta de entrada debe tener tipo y clase o id

<input type="number" class="classname">
0
Gurami 13 oct. 2019 a las 22:57

Intente obtener el valor del tipo de entrada usando: document.getElementById("demo").value, y también puede manipular el cuadro de entrada usando la misma línea de código:

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>
0
A. Meshu 14 oct. 2019 a las 10:39