title: How do I correctly use an iteration value in JavaScript?
body: <p>I am creating a 'simple' javaScript function which basically displays new information on the page when a user clicks next or previous.
  The information is taken from an array and I want to use either i++ or i-- to call an element of the array.</p>
  
  <p>Heres my JavaScript:</p>
  
  <pre><code>var titles = ["Dundalk", "Navan", "Drogheda", "Dublin"];
  var i = 0;
  
  function next()
      {
      i++;
      if (i == titles.length)
          {
          i = 0;
          }
      var object = document.getElementById('tname');
      object.innerHTML = titles[i];
      }
  
  function prev()
      {
      if (i == 0)
          {
          i = titles.length;
          }
      i--;
      var object = document.getElementById('tname');
      object.innerHTML = titles[i];
      }
  </code></pre>
  
  <p>The problem is, when I run this code in my HTML page, I get an 'UNDEFINED' result.  The JavaScript is not recognizing that i has been initialized as 0 in the beginning.
  If i change titles[i] to titles[2], for example, the correct text is displayed in HTML.</p>
  
  <p>What am I forgetting or how can I overcome this?</p>
  
  <p>Thanks</p>