title: Getting next element of an array after javascript click and display it in search form
body: <p>I would like to create JS code that put next elements from array in form after some action, for example after click.</p>
  
  <p><strong>I want to run this code in console (firebug, firefox F12) while im visiting some website. I created test example of code that should work on stackoverflow but it doesn't, why?</strong></p>
  
  <p>Example - stackoverflow.com:</p>
  
  <p>After clicking in header area (<strong>id #question-header</strong>), my next element from array should be displayed in search form input (<strong>name q</strong>). </p>
  
  <p>Code doesnt work when I run it in firefox console.</p>
  
  <pre><code>    var arr = ['foo', 'bar', 'baz'];
  var i = 0;
  
  function nextItem() {
      i = i + 1; // increase i by one
      i = i % arr.length; // if we've gone too high, start from `0` again
      return arr[i]; // give us back the item of where we are now
  }
  
  window.addEventListener('load', function () {
      document.getElementsByName('q').value = arr[0]; // initial value
      document.getElementById('question-header').addEventListener(
          'click', // we want to listen for a click
          function (e) { // the e here is the event itself
              document.getElementsByName('q').value = nextItem();
          }
      );
  });
  </code></pre>
  
  <p>How I can fix it?</p>