title: Display elements of an array one by one in order on event click
body: <p>i want to show each item one by one on event click by order. By default it is the first element, when button is clicked it should show second one, after third etc...When it reaches the last element, it should repeat again and it should always show by order after click.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var texts = ["one", "two", "three", "four", "five"];
  
  var btn = document.getElementById("myBtn");
  btn.addEventListener("click", changeText);
  var text = document.getElementById("myText");
  text.innerHTML = texts[0];
  
  function changeText(){
  
   for( var i = 0; i &lt; texts.length; i++ ){
    text.innerHTML = texts[i];
   }
   return;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="myText"&gt;&lt;/p&gt;
  &lt;button type="button" id="myBtn"&gt;Start&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>