Este es parte de una serie de ejercicios que he estado haciendo y es el único que no he podido completar (soy principiante en Javascript). El ejercicio dice "Crear una entrada, y un botón, para que cada vez que se ingrese un valor se guarde el valor total en una variable. Crear otro botón, que al ser presionado muestre el total acumulado".
He intentado esto:
JavaScript:
function ex15Save(ex15Num){ let num1 = document.getElementById("ex15Num"); var ex15Num = num1; let ex15Storage; ex15Storage += ex15Num; }HTML:
<label>Number to store <input id="ex15Num" type="number"> </label> <button onclick="ex15Save()">Save Total</button> <button onclick="ex15Show()">Show total</button> <p id="ex15Total"></p>Sé que el código ni siquiera está cerca de estar terminado, pero ha llegado a un punto en el que mi cerebro no puede comprender cómo almacenar la suma de los valores sin sobrescribir el valor de una variable.
Hay algunas cosas que debe hacer aquí, pero la lógica básica es la siguiente:
Cree una nueva variable ( total ) y agregue el valor de la entrada cada vez que se haga clic en el botón. Notará el uso de parseFloat() para garantizar que se pueda agregar el valor.
const input = document.getElementById('ex15Num'); const output = document.getElementById('ex15Total'); const saveButton = document.getElementById('ex15SaveButton'); const showButton = document.getElementById('ex15ShowButton'); let total = 0; saveButton.addEventListener('click', (e) => { e.preventDefault(); const toAdd = parseFloat(input.value); if (!isNaN(toAdd)) { total+= toAdd; input.value = ''; } }); showButton.addEventListener('click', (e) => { e.preventDefault(); output.innerText = total; }); <label for="ex15Num">Number to store</label> <input id="ex15Num" type="number"> <button id="ex15SaveButton">Save Total</button> <button id="ex15ShowButton">Show total</button> <p id="ex15Total"></p> Además, evite usar controladores de eventos intrusivos y, en su lugar, vincule sus eventos con addEventListener .
/* Declare ex15Storage outside the function otherwise it will reset everytime the function is called */ let ex15Storage = 0; function ex15Save(){ let num1 = document.getElementById("ex15Num"); /* the num1 is an object so you want the value from it.. also format the value to number Otherwise 0 + "123" = 0123 // num + string is numstring value */ let ex15Num = Number(num1.value); ex15Storage += ex15Num; console.log(ex15Storage) } function ex15Show(){ document.getElementById("ex15Total").innerHTML = ex15Storage; } <label>Number to store <input id="ex15Num" type="number"> </label> <button onclick="ex15Save()">Save Total</button> <button onclick="ex15Show()">Show total</button> <p id="ex15Total"></p>