Estoy tratando de hacer un evento de clic de cuenta regresiva. He logrado hacerlo por contar hasta 10.
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let btnForward = document.querySelector(".forward"); let btnBackward = document.querySelector(".backward"); let z = 0; btnForward.addEventListener("click", function () { let numbersPara = document.getElementById("numbersPara"); z++; if (z >= numbers.length) z = 0; numbersPara.innerText = numbers[z]; }); // #### Button backwardwork correctly only partially ###### btnBackward.addEventListener("click", function () { let numbersPara = document.getElementById("numbersPara"); z--; if (z < 0) z = 10; numbersPara.innerText = numbers[z]; }); <div><button class="backward">Backward</button></div> <div><button class="forward">Forward</button></div> <div><code id="numbersPara">1</code></div>Quiero contar hasta 10 cuando hago clic en el botón y cuando llegue a 10 debería cambiar a 1 nuevamente. Funciona bien.
Sin embargo, cuando comencé la cuenta regresiva de 10 a 0, aparece "indefinido" en lugar de cambiar a 10. ¿Cómo solucionarlo? ¿Alguien sabe?
Parece que cometiste un error clásico que le sucede a todos en algún momento. En su ejemplo, el índice 0 contiene un valor de 1 .
Para solucionar esto, solo necesita cambiar esta línea (en el detector de eventos buttonBackward click ):
if (z < 0) z = 10;a lo siguiente.
if (z < 0) z = 9; Sin embargo, esto podría mejorarse aún más cambiando z = 9 a z = numbers.length - 1 (una mejor práctica en caso de que desee agregar o eliminar elementos más adelante):
if (z < 0) z = numbers.length - 1; // the last index will be numbers.length - 1La solución de código completo (con algunos elementos html provistos para mostrar que funciona):
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const btnForward = document.querySelector(".forward"); const btnBackward = document.querySelector(".backward"); // set a reference to numbersPara to reduce calls to the DOM const numbersPara = document.getElementById("numbersPara"); let z = 0; btnForward.addEventListener("click", () => { z++; if (z >= numbers.length) z = 0; numbersPara.innerText = numbers[z]; }); btnBackward.addEventListener("click", () => { z--; if (z < 0) z = numbers.length - 1; numbersPara.innerText = numbers[z]; }); <div><button class="backward">Backward</button></div> <div><button class="forward">Forward</button></div> <div><code id="numbersPara">1</code></div>