How can I loop through a jquery array and then output each item (starting at index 0) one at a time?

Question

I'm trying to collect user responses and add them into the answers array. Then I want to display the most recent user input ( answers[0] ) into the .user-answer div . I've managed to get that part taken care of but if you see a better way to do it then please show me.

The second part of is that I want to show the items in the array one at a time in the .dynamic-content h2 slot. I need to loop through the array (starting at answers[0]), pull out each item, show it in the div and then move to the next item and show it in the div .

Here's a link to the CodePen .

HTML

<div class="answer">
  <h1>Life, Liberty, and </h1>
</div>

<div class="user-answer">
  <h1>_________</h1>
</div>

<input type="text"/>
<input type="submit"/>

<div class="dynamic-content">
  <h1>What is your pursuit of happiness?</h1>
  <h2>Output array items here</h2>
</div>

JavaScript

// create an empty array
var answers = []; 

// STORE AND OUTPUT DATA ON SUBMISSION

function handleUserInput() {

  // store user input
  var userInput = $('input[type=text]').val(); 

  // append input value to answers array
  answers.unshift(userInput); 

  // add latest user input into the HTML
  $('.user-answer').html('<h1>' + answers[0] + '</h1>'); 

}

// RUN FUNCTION ON SUBMISSION

$('input[type=submit]').on('click', function() {
  handleUserInput();
});

Answer 1

First, I don't know if you want to do this on server side or in client side, but for server side you need to make it work with a server side scripting language, like PHP , or Perl . For clent side, you need to cancel the default submit event when user clicks the submit button, else the page will refresh posting the form data.

So, to do this without the page refreshing, first add the event to the onclick event and pass it to your handleUserInput function like this:

$('input[type=submit]').on('click', function(e) {
  handleUserInput(e);
  rotate();
});

then, cancel the event by using preventDefault to the event object:

e.preventDefault();

now, to display the data to .dynamic-content and add the answers in h2 tags, you first need to remove all h2 elements (because you already have an h2 element there, or you could also prepend if you remove the h2 Output array items here tag) and then add all the answers starting from the first one like this:

$('.dynamic-content h2').remove();

$.each(answers, function(i, v) {
  $('.dynamic-content').append($('<h2/>').text(v));
});

The final code will be something like this:

var answers = []; // create an empty array

// STORE DATA ON SUBMISSION
function handleUserInput(e) {
  e.preventDefault();

  var userInput = $('input[type=text]').val(); // store user input

  answers.unshift(userInput); // append value to answers array

  // $('.user-answer').fadeIn().html('<h1>' + answers[0] + '</h1>').delay( 500 ).fadeOut(); // add user input into the HTML

  $('.user-answer').html('<h1>' + answers[0] + '</h1>'); // add user input into the HTML

  $('.dynamic-content h2').remove();

  $.each(answers, function(i, v) {
    $('.dynamic-content').append($('<h2/>').text(v));
  });

  // $('.answer').html('<h1>' + answers[0] + '</h1>'); 
  // $.each(answers[0 + i], function() {
  //   $('.answer').fadeIn().html('<h1>' + answers + '</h1>').delay( 500 ).fadeOut();
  // });

}

$('input[type=submit]').on('click', function(e) {
  handleUserInput(e);
  rotate();
});

http://codepen.io/clytras/pen/zoBXpE

Answer 2

Just change your JS a little bit to this:

  var answers = []; // create an empty array // STORE DATA ON SUBMISSION function handleUserInput() { var userInput = $('input[type=text]').val(); $('.user-answer').html('<h1>' + userInput + '</h1>'); answers.push(userInput); $('.dynamic-content h2').html(answers + ', '); } $('input[type=submit]').on('click', function() { handleUserInput(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="answer"> <h1>Life, Liberty, and </h1> </div> <div class="user-answer"> <h1>_________</h1> </div> <input type="text"/> <input type="submit"/> <div class="dynamic-content"> <h1>What is your pursuit of happiness?</h1> <h2>Output array items here</h2> </div> 

Answer 3

It's not the best way but here it goes. This method is like you asked to change the SAME DIV dynamically, so no other items are created, they just "change"

Add this function:

function rotateTerm() {
  if(answers.length>0){
  var ct = $("#rotate").data("term") || 0;
  $("#rotate").data("term", ct == answers.length -1 ? 0 : ct + 1).text(answers[ct]).fadeIn().delay(2000).fadeOut(200,function(){
rotateTerm();
  });
 }
}
$(rotateTerm);

Then in your submission put:

$('input[type=submit]').on('click', function() {
  handleUserInput(); 
  $(rotateTerm);
});

working CodePen thanks to Nick Craver's answer in this thread .