Hay tres botones en los que el usuario puede hacer clic para aumentar, disminuir o restablecer el número (que es 0 por defecto). Intenté hacer un botón de reinicio que parecía funcionar porque el número estaba configurado en 0, pero si hacía clic en el botón de incremento o disminución, suma/resta y muestra el número antes de que se reiniciara.
let number = 0; function increment() { number++; document.getElementById("number").innerHTML = number; } function decrement() { number--; document.getElementById("number").innerHTML = number; } function reset() { let number = 0; document.getElementById("number").innerHTML = number; } <span id="number"></span> <button id="increment" onclick="increment()">Increment</button> <button id="decrement" onclick="decrement()">Decrement</button> <button id="reset" onclick="reset()">Reset</button>Cambio de reinicio interno let number = 0; con number = 0;
<button id="increment" onclick="increment()">Increment</button> <button id="decrement" onclick="decrement()">Decrement</button> <button id="reset" onclick="reset()">Reset</button> <p id='number'></p> <script> let number = 0; function increment() { number++; document.getElementById("number").innerHTML = number; } function decrement() { number--; document.getElementById("number").innerHTML = number; } function reset() { number = 0; document.getElementById("number").innerHTML = number; } </script>Al agregar let dentro de su función, está creando otra variable (local) llamada number en lugar de cambiar la variable global ya existente. Solo déjalo fuera para acceder a la variable original:
function reset() { number = 0; document.getElementById("number").innerHTML = number; } Como nota al margen: javascript ya tiene una función llamada Number , por lo que es mejor no usar un nombre tan similar para su variable, como count , o algo un poco más descriptivo como amount_of_something .
Además del error tipográfico let en su código
on* . JS debe estar en un solo lugar. Use addEventListener() en su lugar.type="button" en elementos de botón que voluntariamente no sean del tipo Enviar (predeterminado)<span> use un elemento <input type="number"> y, eventualmente, agregue el atributo de readonly .stepUp() y stepDown() de JS Input // DOM utility functions: const el = (sel, par) => (par || document).querySelector(sel); const els = (sel, par) => (par || document).querySelectorAll(sel); // Number inputs with arrows: const initInputArrows = (elNum) => { const elUp = el(".num-up", elNum); const elDn = el(".num-down", elNum); const elRs = el(".num-reset", elNum); const elIn = el(".num-input", elNum); elDn.addEventListener("pointerdown", () => elIn.stepDown()); elUp.addEventListener("pointerdown", () => elIn.stepUp()); elRs.addEventListener("pointerdown", () => elIn.value = 0); }; els(".num").forEach(initInputArrows); <div class="num"> <input type="number" class="num-input" min=0 max=100 step=1 value=0> <button type="button" class="num-up">▴</button> <button type="button" class="num-down">▾</button> <button type="button" class="num-reset">×</button> </div> <div class="num"> <input type="number" class="num-input" min=0 max=100 step=0.5 value=5.5> <button type="button" class="num-up">▴</button> <button type="button" class="num-down">▾</button> <button type="button" class="num-reset">×</button> </div>