title: Javascript event handler to update a JSON object name
body: <p>I am just starting out in Javascript and was wondering if anyone would mind pointing me in the right direction with this query I have.</p>
  <p>I have created a JSON array and now wish to update some text on the page from the array upon clicking of the button.  I have an event handling function that updates an image OK but I can't work out how to have the object name (pageRef) update within the 'nextPage' function so that the text updates from the contents of the array.  I appreciate that this is probably a really obvious question but a pointer in the right direct will be greatly appreciated.</p>
  <pre><code>    var diary_1938 = {
        
      'page_1': {
      'date_0': '1st Jan','entry_0': 'This is the first line',
      'date_1': '2nd Jan','entry_1': 'This is the second line',
      'date_2': '4th Jan','entry_2': 'This is the third line',
      'img': 'image_1.jpg'},
      'page_2':  {
      'date_0': '12th Jan','entry_0': 'This is the first line',
      'date_1': '13th Jan','entry_1': 'This is the second line',
      'date_2': '14th Jan','entry_2': 'This is the third line',
      'img': 'image_2.jpg'},
      };
      
      var counter = 1;
      var pageRef = &quot;page_&quot;+counter;
      
      function nextPage() {
        counter++
        document.getElementById(&quot;DiaryImage&quot;).src = &quot;image_&quot;+counter+&quot;.jpg&quot;;
      }
      
      function prevPage() {
        counter--
        document.getElementById(&quot;DiaryImage&quot;).src = &quot;image_&quot;+counter+&quot;.jpg&quot;;
      }
      
      &lt;/script&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
      
      &lt;button type = &quot;submit&quot; name = &quot;submit_prev&quot; onClick = &quot;prevPage()&quot;&gt; &lt;&lt; &lt;/button&gt;
      &lt;button type = &quot;submit&quot; name = &quot;submit_next&quot; onClick = &quot;nextPage()&quot;&gt; &gt;&gt; &lt;/button&gt;
      &lt;br/&gt;
      
          &lt;script&gt; document.write(diary_1938[pageRef].date_0 + &quot;&lt;br/&gt;&quot;); &lt;/script&gt;
          &lt;script&gt; document.write(diary_1938[pageRef].entry_0 + &quot;&lt;br/&gt;&lt;br/&gt;&quot;); &lt;/script&gt;
          &lt;script&gt; document.write(diary_1938[pageRef].date_1 + &quot;&lt;br/&gt;&quot;); &lt;/script&gt;
          &lt;script&gt; document.write(diary_1938[pageRef].entry_1 + &quot;&lt;br/&gt;&lt;br/&gt;&quot;); &lt;/script&gt;
          &lt;script&gt; document.write(diary_1938[pageRef].date_2 + &quot;&lt;br/&gt;&quot;); &lt;/script&gt;
          &lt;script&gt; document.write(diary_1938[pageRef].entry_2 + &quot;&lt;br/&gt;&lt;br/&gt;&quot;); &lt;/script&gt;    
      
      &lt;script&gt;document.write(&quot;&lt;img id = 'DiaryImage' src = 'image_1.jpg' width='370' height='790' name ='Dunford'/&gt;&quot;); &lt;/script&gt;
      
      &lt;/body&gt;
  </code></pre>