title: How to loop through an array on keyboard event
body: <pre><code>let arr = []
  document.getElementsByTagName('button')[0].addEventListener('click', function(){
      arr.push('heart'+arr.length)
  })
  
  document.addEventListener('keydown', function(e){
      if (e.keyCode === 40) { // down
      // alert me with last item in arr
    } 
  })
  
  
  &lt;button&gt;add hearts&lt;/button&gt;
  </code></pre>
  
  <p>How can I show an alert with the last item in <code>arr</code> when I hit down on my keyboard? And so every time I hit <code>down arrow</code> I get the next array in line.</p>
  
  <p>The first time I hit <code>down</code> = alert last arr item</p>
  
  <p>The second time I hit <code>down</code> = alert before last arr item</p>
  
  <p>...... and so on</p>
  
  <p><a href="https://jsfiddle.net/o8L4qvb3/" rel="nofollow noreferrer">https://jsfiddle.net/o8L4qvb3/</a></p>