Get Array Item In Seqence With Ordered List In JavaScript.

This blog post will teach you how to access array elements one by one in JavaScript upon clicking a button. We'll create two functions: one to retrieve and display individual elements one by one (turn by turn), and another specifically designed to display them all within an ordered list.

Get Array Elements One By One In Ordered List.

Let’s first create a simple design using HTML and CSS.

HTML

    <div class="container">
        <h1>Maketechstuff.com</h1>

        <div class="output"></div>
        <button type="button" class="button">Click</button>

    </div>
 

CSS

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding: 20px;
    background-color: blue;
    color: #fff;
}

.output {
    font-size: 30px;
    margin-bottom: 10px;
}

button {
    width: 100%;
    font-size: 30px;
    font-weight: bold;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: blue;
    cursor: pointer;
    transition: 0.2s;
}

button:active {
    transform: scale(0.95);
}

Once the design is complete, let's add JavaScript to retrieve the array elements sequentially.

First, we'll define the necessary variables and create an array named fruit_array to store the fruit names. Additionally, we'll define a variable named i to use as an index for the array (fruit_array).

Next, we'll attach a click event listener to a button. Upon clicking this button, we call the function.

After the function call, we'll proceed to define the function itself. Within this function, we'll initially increment the value of the i variable by 1, we'll extract the array element from fruit_array, based on the updated value of i, and store it within the designated output element (where we want to display the array items).

Finally, we'll add a conditional statement. That hides the button and displays the message “All elements are displayed”.

JavaScript

    let button = document.querySelector(".button");
    let output = document.querySelector(".output");
    // Array containing fruit names.
    let fruit_array = ["Mango", "Apple", "Banana", "Grapes", "Orange", "Pineapple", "Pomogranate"];

    // Adding click event listener to button.
    button.addEventListener("click", get_array_items);

    // This variable value we'll use as a index to extract the item from the fruit_array.
    let i = 0;

    // Declaring the function.
    function get_array_items() {
        // Incrementing the i variable value.
        i++;
        // Extracting the item from array based on incremented i variable value and store it inside the desired html element (output).
        output.innerHTML = fruit_array[i - 1];

        // Repeat the array item to display inside the output element.
        if (i == fruit_array.length) {
            i = 0;
        }
    }
  

Output:

So as you can see that the array element is displaying one by one.

Now if you want to display all elements one by one like a list then you can add += sign while storing the array element in the output element. Like this:

JavaScript

    let button = document.querySelector(".button");
    let output = document.querySelector(".output");

    // Array containing fruit names.
    let fruit_array = ["mango", "apple", "banana", "grapes", "orange", "pineapple", "pomogranate"];

    button.addEventListener("click", get_array_items);

    // This variable value we'll use as a index to extract the item from the fruit_array.
    let i = 0;
    function get_array_items() {
        // Incrementing the i variable value.
        i++;

        // Extracting the item from array based on incremented i variable value and store it inside the desired html element (output).
        output.innerHTML += fruit_array[i - 1] + `<br>`;

        // If all items are displayed then show the message that all items are displayed and hide the button.
        if (i === fruit_array.length) {
            output.innerHTML += "<br><b>All items are displayed</b>";
            button.style.display = "none";
        }
    }
    

Output:

Now all the elements are displayed one by one like a list.

You can also display array elements with ordered lists or display with serial numbers.

Display Array Elements With Ordered List.

In HTML, we begin by creating an ordered list tag (<ol>) within the output element.

HTML

<div class="container">
    <h1>Maketechstuff.com</h1>

    <div class="output">
        <ol class="ol">

        </ol>
    </div>
    <button type="button" class="button">Click</button>
</div>  

Next, with JavaScript, we append array elements, each wrapped within list item tags (<li>), to the ordered list tag. This process ensures that the array elements are presented with sequential numbering.

JavaScript

    let button = document.querySelector(".button");
    let output = document.querySelector(".output");
    let ol = document.querySelector(".ol");

    // Array containing fruit names.
    let fruit_array = ["mango", "apple", "banana", "grapes", "orange", "pineapple", "pomogranate"];

    button.addEventListener("click", get_array_items);

    // This variable value we'll use as a index to extract the item from the fruit_array.
    let i = 0;
    function get_array_items() {

        // Incrementing the i variable value.
        i++;

        // Extracting the item from array based on incremented i variable value and store it inside the desired html element (ol tag) with li tag.
        ol.innerHTML += `<li>` + fruit_array[i - 1] + `</li>`;

        // If all items are displayed then show the message that all items are displayed and hide the button.
        if (i === fruit_array.length) {
            output.innerHTML += "<br><b>All items are displayed</b>";
            button.style.display = "none";
        }
    }
  

Output:

So that's how you can display the array items one by one, one by one like a list and one by one in an ordered list in javascript. If you have any query or suggestion feel free to write in the comment section.