Estoy tratando de hacer un contador simple con botones de incremento y reinicio. Cada vez que hago clic en incrementar, puedo ver que el contador va de 0 a 1, como debería (si hago console.log algo, puedo verlo en la consola en Chrome).
El problema es que, tan pronto como aumenta, se restablece a 0, como si la página se actualizara (el registro en la consola también se borra, por lo que creo que la página se actualiza, no estoy seguro de que realmente lo haga) .
Aquí está mi código:
// Functions const setCounter = (n) => document.getElementById("counter").innerHTML = n; const resetCounter = () => setCounter(0); const getCounterValue = () => parseInt(document.getElementById("counter").innerHTML); const incrementCounter = () => setCounter(getCounterValue() + 1); // Button Variables var incrementButton = document.getElementById("increment-btn"); var resetButton = document.getElementById("reset-btn"); // Button Functions incrementButton.onclick = () => incrementCounter(); resetButton.onclick = () => resetCounter(); <span id="counter">0</span> <form class="counter-btns"> <button class="btn" id="increment-btn" type="button">Increment</button> <button class="btn" id="reset-btn" type="button">Reset</button> </form>De manera similar, si codifico el valor del contador para que comience en 3, al hacer clic en el botón de reinicio se establece el valor en 0, pero al instante vuelve a 3 (al hacer clic en el botón de incremento se establece el valor en 4, pero al instante vuelve a 3).
Nota: estoy usando VSCode. Tengo este problema cuando abro index.html con Chrome o cuando lo abro con Live Server en VSCode
intenta cambiar:
<button class="btn" id="increment-btn">Increment</button> <button class="btn" id="reset-btn" type="button">Reset</button>a:
<button type="button" class="btn" id="increment-btn">Increment</button> <button type="button" class="btn" id="reset-btn" type="button">Reset</button>pero prefiero desactivar la acción del formulario, porque cualquier tecla de retorno en un formulario realiza un envío de formulario.
// Functions const counterForm = document.forms['counter-btns'] counterForm.onsubmit = e => { e.preventDefault() // desactivate form submit (no page relaod) counterForm.counter.textContent = 1 + +counterForm.counter.textContent } counterForm.onreset = e => { counterForm.counter.textContent = 0 } <form name="counter-btns"> <output name="counter" > 0 </output> <button>Increment</button> <button type="reset">Reset</button> </form>nb: + (signo) como primer carácter actúa como parseInt()