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

"Exploring the Functionality of Page Scrolling with

Guide to setting up an automated process in PHP

Defining the active element in the menu using JavaScript

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

v-for triggers actions on every div

Is there a way to convert HTML into a structured DOM tree while considering its original source location?

Issue with showing Angular directive

Create a substitute for Object.seal, Object.freeze, and Object.preventExtensions applications

Access a specific JSON value using AngularJS

Is it possible for me to identify the original state of a checkbox when the page first loaded, or the value it was reset to when `reset()` was

Optimal approach for handling large JSON files

add the closing </div> tag using jquery only

Creating atomic controller actions in Sails.js: A guide to optimizing your controller functions

Guide to executing a fetch request prior to another fetch in React Native

Conceal a column within a table by double-clicking

Utilizing react.js and passing props as parameters in recursive functions

Error: Unable to access the 'clearAsyncValidators' property as it is undefined when running Jest tests on an Angular component

The Push Over Menu is malfunctioning and not functioning properly

What is the best way to manage div visibility and sorting based on selections made in a select box?

Retrieve the id for the chosen user name within a function that contains an array of objects