JQuery: How to display an array of paragraph tags one by one on every 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 them all in one click. How to fix it?

Answer 1

You can display paragraphs one by one as follows:

 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++; } }); 

Answer 2

 <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; });