JQuery: How to display an array of paragraph tags one by one on each click?

Question

var sentences = ['sentenceone', 'another sentence', 'another sentence again'];

$(".btn").on('click', function() {

    for(var i=0; i < sentences.length; i++) {
        samplebox.innerHTML += '<p>'+sentences[i]+'</p>';
    }
});

This displays all of them in one click. How do I fix this?

R3tep · Accepted Answer · 2016-05-04 16:09:05Z

6

You can displays the paragraphs one by one like this :

var sentences = ['sentenceone', 'another sentence', 'another sentence again'];
var i = 0;

$(".btn").on('click', function() {

  if (i < sentences.length) {
    samplebox.innerHTML += '<p>' + sentences[i] + '</p>';
    i++;
  }

});

answered May 4, 2016 at 16:09

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohit Bhardwaj · Accepted Answer · 2016-05-04 16:08:55Z

0

<button class="btn" data-step="1">Click here</button>

var sentences = ['sentenceone', 'another sentence', 'another sentence again'];

$(".btn").on('click', function() {
        var limit = parseInt( $(this).attr("data-step") ) - 1;
        for(var i=0; i < limit; i++) {
            samplebox.innerHTML += '<p>'+sentences[i]+'</p>';
        }
        $(this).attr("data-step") = limit + 2;
    });

answered May 4, 2016 at 16:08

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

Collectives™ on Stack Overflow

JQuery: How to display an array of paragraph tags one by one on each click?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related