I'm trying to make a countdown click event. I've managed to do it for counting up to 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>I want to count up to 10 when I click the button and when it reaches 10 it should switch to 1 again. It works fine.
However, when I started counting down from 10 to 0, it displays "undefined" instead of switching to 10. How to fix it? Anyone knows?
It looks like you've made a classic error that happens to everyone at some point. In your example, index 0 contains a value of 1.
To fix this, you just need to change this line (in the buttonBackward click event listener):
if (z < 0) z = 10;
to the following.
if (z < 0) z = 9;
However, this could be improved further by changing z = 9 to z = numbers.length - 1 (better practice in case you want to add or remove elements later):
if (z < 0) z = numbers.length - 1; // the last index will be numbers.length - 1
The full code solution (with some html elements provided to show it working):
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>