Estoy haciendo una calculadora de hipotecas y estoy tratando de borrar todas las entradas cuando se presiona el botón Borrar. Parece que no puedo hacer que funcione. A continuación se muestra mi código html y JavaScript, también intenté configurar las entradas = nulo y eso no funcionó.
HTML:
<div class="calculator"> <h1>Mortgage Calculator</h1> <div class="input-container"> <label for="Loan-amount">Total Loan Amount</label> <input type="number" name="Loan-amount" id="total" min="0"> </div> <div class="input-container"> <label for="down-payment">Down payment</label> <input type="number" name="Loan-amount" id="down" min="0"> </div> <div class="input-container"> <label for="interest-rate">Interest rate %</label> <input type="number" name="interest-rate" id="interest" min="0"> </div> <div class="input-container"> <label for="loan-term">Loan Term (in years)</label> <input type="number" name="loan-term" id="duration" min="0"> </div> <div class="answer"> <h2>Estimated payment:</h2> <p id="paragraph-value"></p> </div> <div class="button-container"> <button id="submitBtn">Calculate</button> <button id="clearBtn">Clear</button> </div> <p id="alert"></p> </div>JavaScript:
const clearBtn = document.querySelector("#clearBtn"); clearBtn.addEventListener("click", function (e) { let total = document.getElementById("total").value; let interest = document.querySelector("#interest").value; let duration = document.querySelector("#duration").value; let downPayment = document.querySelector("#down").value; total = ""; interest = ""; duration = ""; downPayment = ""; });No está configurando un valor para las entradas, simplemente está sobrescribiendo el valor de una variable:
total = ""; Para establecer el valor de la entrada, establecería la propiedad .value en la entrada:
document.getElementById("total").value = "";Por ejemplo:
const clearBtn = document.querySelector("#clearBtn"); clearBtn.addEventListener("click", function (e) { document.getElementById("total").value = ""; }); <input type="number" id="total" /> <button id="clearBtn">Reset</button>En un nivel más genérico, parece estar confundido acerca de la diferencia entre estas dos cosas:
var total = document.getElementById("total").value; total = "";y:
var total = document.getElementById("total"); total.value = "";En el primer caso, la variable contiene una copia del valor en sí y está reasignando la variable a un nuevo valor. Esto no hace nada al elemento.
Pero en el segundo caso, la variable contiene una referencia al elemento y está actualizando una propiedad en ese elemento.