The below example shows how to achieve it using jQuery. We have a button here and on clicking the button the values from array will be displayed one by one. There are two examples below, one simply access the values from an array and another displays the images from an array.
HTML

<div class="row text-center">
    <button type="submit" class="btn btn-lg btn-info">Click Here!</button>
</div>

 

First example:

$(function(){
        var values = [
            "hi",
            "hello",
            "nice",
            "wonderful"
        ];
        var counter = 0;
        $(".btn-lg").on("click", function(){
            if(values.length) {
                counter = (counter + 1) % values.length;
                $('.row .text-center').append(values[counter] + ' ');
            }
        });
});

 

Second Example:

var i=0, images = [
    "<img src='first.png' />",
    "<img src='second.png' />",
    "<img src='third.png' />",
    "<img src='kitten.png' />"
];

jQuery('.btn-lg').on("click", function(){
     if (i>=images.length) return;
     jQuery('.row .text-center').append(images[i++]);
});

 

That’s all. Thank you for reading. Please do not forget to leave a comment.

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials | TwitterFacebook Google PlusLinkedin | Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *