title: Looping array on click in javascript
body: <p>I want to change the index of <code>newAr</code> on each click and console log the values of next object in <code>newAr</code> showed in looper function</p>
  <p>Note: I only want the index second object values on second click and third object values in <code>newAr</code> on third click</p>
  <p>HTML only has a button nothing else</p>
  <pre><code>const button = document.querySelector(&quot;button&quot;);
  
  let firstVar = () =&gt; {
    const firstVarVariable = Math.round(Math.random() * 10);
    if (firstVarVariable &lt; 5) {
      return true;
    } else {
      return false;
    }
  };
  let secondVar = () =&gt; {
    const firstVarVariable = Math.round(Math.random() * 10);
    if (firstVarVariable &lt; 5) {
      return true;
    } else {
      return false;
    }
  };
  let thirdVar = () =&gt; {
    const firstVarVariable = Math.round(Math.random() * 10);
    if (firstVarVariable &lt; 5) {
      return true;
    } else {
      return false;
    }
  };
  
  const newAr = [];
  const pusher = () =&gt; {
    newAr.push({
      one: firstVar(),
      two: secondVar(),
      three: thirdVar(),
    });
    console.log(newAr);
    looper();
  };
  
  const looper = () =&gt; {
    for (const value of newAr) {
      console.log(value.one);
      console.log(value.two);
      console.log(value.three);
    }
    // I want to change the index of newAr array on click
    // Like i want to console log first object in array on first click
    // and second object on other click and third object
    // alsp please tell me if i can change some approch
  };
  
  button.addEventListener(&quot;click&quot;, () =&gt; {
    pusher();
  });
  </code></pre>