Soy muy nuevo en Javascript y estoy buscando una solución para comprender mejor cómo funciona.
Estoy creando una aplicación de presupuesto simple con varias entradas de texto de usuario. Lo que quiero lograr es almacenar estas entradas de usuario dentro de variables dentro de JS, agregarlas, posiblemente compararlas, luego devolver un total en la página cuando el usuario haga clic en un botón en el elemento de párrafo vacío. Aquí hay una muestra del código html (solo he incluido dos de las entradas, ya que funcionarán de la misma manera y solo necesito comprender el concepto):
<ul> <li><p>Money In:</p></li> <br> <li class="inputHeading">Current Balance</li> <li><input type="text" class="input" id="balanceInput"></li> <li><p>Money Out:</p></li> <br> <li class="inputHeading">Rent</li> <li><input type="text" class="input" id="rentInput"></li> <li><input type="button" class="button" value="AMOUNT LEFT" onclick="calcTotal()"></li> <li class="output" id="amountOutput"><p></p></li> </ul>He investigado varios métodos, pero la mayor parte de lo que encuentro es mucho más complejo de lo que puedo entender actualmente. Quería ver si alguien podía sugerir y explicar una solución a cómo hacer esto. ¡Tu ayuda sería muy apreciada!
Puede almacenar la entrada en js con document.getElementById("id").value
Sin embargo, esto se almacenará en una cadena, por lo que debe cambiarlo a entero/flotante si desea calcular el total
parseFloat() es el método para analizar cadenas de texto en valores flotantes.
En el ejemplo que proporcionó, los valores son el saldo actual y el alquiler, por lo tanto, creo que es más adecuado encontrar la diferencia en lugar de sumarlos.
function calcTotal() { var inputbal = parseFloat(document.getElementById("balanceInput").value); var inputrent = parseFloat(document.getElementById("rentInput").value); var balance = inputbal - inputrent; document.getElementById("balance").innerHTML = balance.toFixed(2); } <ul> <li> <p>Money In:</p> </li> <br> <li class="inputHeading">Current Balance</li> <li><input type="text" class="input" id="balanceInput"></li> <li> <p>Money Out:</p> </li> <br> <li class="inputHeading">Rent</li> <li><input type="text" class="input" id="rentInput"></li> <li><input type="button" class="button" value="AMOUNT LEFT" onclick="calcTotal()"></li> <li class="output" id="amountOutput"> <p></p> </li> </ul> <p id="balance"></p>