Iterate over the array and show the elements only when a click event occurs

Question

Iterate over the array and show the elements only when a click event occurs

I am trying to create a loop through an array (array) and display the elements one by one only after clicking a button (bt). However, when I run this code, it only shows the last element of the array (i.e. honda). Can someone please help me fix this issue?

var hints = document.querySelector(".hint");
                var array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", "honda"];
                var bt = document.querySelector("button");
                for (var i = 1; i < 6; i++){
                    bt.addEventListener("click", function(){
                        hints.textContent = array[i];
                    });
                }

<!DOCTYPE html>
                <html>
                    <head>
                        <meta charset="utf-8">
                        <title>Password</title>
                        <link rel="stylesheet" href="password.css" type="text/css">
                    </head>
                    <body>
                        <h1 class="hint"></h1>
                        <button type="button" name="button">Click me</button>
                        <script src="password.js" charset="utf-8" type="text/javascript"></script>
                    </body>
                </html>

javascript arrays loops dom addeventlistener

Answer 1

Answer №1

Whenever you click the button, the displayed value is always 'honda' because at that moment the click event occurs, the value of i is set to 6.

Therefore, each click will reveal the value at array[6], which is 'honda'.

Give the following code a try:

let hints = document.querySelector(".hint");
let array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", 
"honda"];
let bt = document.querySelector("button");
let count = 0;

bt.addEventListener('click', () => {
    hints.textContent = array[count];
    console.log('clicked!!');
    count++;

    if (count > array.length) {
        console.log('no more values in the array!!');
        return false;
    }
})

I've also created a codepen showcasing this. Feel free to check it out: https://codepen.io/vishalkaului/pen/EbyjML

Answer 2

Whenever you click the button, the displayed value is always 'honda' because at that moment the click event occurs, the value of i is set to 6.

Therefore, each click will reveal the value at array[6], which is 'honda'.

Give the following code a try:

let hints = document.querySelector(".hint");
let array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", 
"honda"];
let bt = document.querySelector("button");
let count = 0;

bt.addEventListener('click', () => {
    hints.textContent = array[count];
    console.log('clicked!!');
    count++;

    if (count > array.length) {
        console.log('no more values in the array!!');
        return false;
    }
})

I've also created a codepen showcasing this. Feel free to check it out: https://codepen.io/vishalkaului/pen/EbyjML

Answer 3

Answer №2

Forget about using a for loop. Simply keep track of your count and display the next item on click. Take a look at the revised code snippet below:

var hints = document.querySelector(".hint");
var array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", "honda"];
var bt = document.querySelector("button");
var count = 0;
    bt.addEventListener("click", function(){
       if (count < array.length) {
             hints.textContent = array[count];
            count++;
       }
    });

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Password</title>
        <link rel="stylesheet" href="password.css" type="text/css">
    </head>
    <body>
        <h1 class="hint"></h1>
        <button type="button" name="button">Cick me</button>
        <script src="password.js" charset="utf-8" type="text/javascript"></script>
    </body>
</html>

Answer 4

Forget about using a for loop. Simply keep track of your count and display the next item on click. Take a look at the revised code snippet below:

var hints = document.querySelector(".hint");
var array = ["Car", "bmw", "mercy", "porsche", "hyundai", "jeep", "honda"];
var bt = document.querySelector("button");
var count = 0;
    bt.addEventListener("click", function(){
       if (count < array.length) {
             hints.textContent = array[count];
            count++;
       }
    });

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Password</title>
        <link rel="stylesheet" href="password.css" type="text/css">
    </head>
    <body>
        <h1 class="hint"></h1>
        <button type="button" name="button">Cick me</button>
        <script src="password.js" charset="utf-8" type="text/javascript"></script>
    </body>
</html>

Iterate over the array and show the elements only when a click event occurs

Answer №1

Answer №2

Similar questions

Dimensions of Collada Element

The handler for errors in DRW consistently generates the message "Error" instead of providing specific information about the issue at hand

AngularJS and synchronized queueing of API requests

Host app is failing to render shared components in SSR

Achieving successful functionality with position:relative in IE9

Performing iterations on a matrix of arrays

Exploring the process of iterating through a JSON post response and displaying its contents within image divs

I keep encountering the issue where I receive the message "Unable to access property 'innerText' of an undefined element" when running the Array forEach function. This problem seems to be happening within the HTMLInputElement section of the code

Step-by-Step Guide for Uploading an Entire Folder and Its Contents

Implement a menu that can be scrolled through, but disable the ability to scroll on the body of the website

How can I ensure a successful redirect to react-router root path after saving to MongoDB in Express?

What methods can be used to incorporate animation when the display attribute transitions to none?

Issue with updating nested child object reference in Redux state input value

Testing an asynchronous generator function in Jest using unit tests

sending a pair of variables via jQuery and AJAX

Incorrect credentials trigger an error in Nodemailer

Send the Vue component as an argument to the function

Struggling to understand the concept of utilizing Promises for data retrieval

Enhancing Efficiency with Laravel 5: Updating Multiple Data Entries

Issue encountered: Next.js has failed to hydrate properly due to a discrepancy between the initial UI and server-rendered content