title: Show array increment one by one elements upon onclick function
body: <p>I am trying to print array elements one by one upon onclick. Here's the code through which i am achieving it. The problem with the code, upon first click it does not increment value while it suppose to replace old array element with new +1 element of array.</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>       function myFunction() {
       var i = 0;
      i++;
          var fruits = ["Banana", "Orange", "Apple", "Mango"];
          document.getElementById("demo").innerHTML = fruits[i];
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt; 
       &lt;p id="demo"&gt;&lt;/p&gt; 
       </code></pre>
  </div>
  </div>
  </p>