Javascript event handler to update a JSON object name

Question

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.

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.

    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 = "page_"+counter;
    
    function nextPage() {
      counter++
      document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
    }
    
    function prevPage() {
      counter--
      document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
    }
    
    </script>
    </head>
    
    <body>
    
    <button type = "submit" name = "submit_prev" onClick = "prevPage()"> << </button>
    <button type = "submit" name = "submit_next" onClick = "nextPage()"> >> </button>
    <br/>
    
        <script> document.write(diary_1938[pageRef].date_0 + "<br/>"); </script>
        <script> document.write(diary_1938[pageRef].entry_0 + "<br/><br/>"); </script>
        <script> document.write(diary_1938[pageRef].date_1 + "<br/>"); </script>
        <script> document.write(diary_1938[pageRef].entry_1 + "<br/><br/>"); </script>
        <script> document.write(diary_1938[pageRef].date_2 + "<br/>"); </script>
        <script> document.write(diary_1938[pageRef].entry_2 + "<br/><br/>"); </script>    
    
    <script>document.write("<img id = 'DiaryImage' src = 'image_1.jpg' width='370' height='790' name ='Dunford'/>"); </script>
    
    </body>

score 0 · Answer 1 · answered Dec 01 '12 at 14:13

0

Because you code in nextPage() is invoked every time when button is clicked. However, your code like :*var counter = 1;var pageRef = "page_"+counter;document.write(diary_1938[pageRef].date_0 + "
");* is executed only once when initializing. so you'd better write you code as:

function nextPage() {
  counter++;
  pageRef = "page_"+counter;
   /*clear written content before*/
  document.write(diary_1938[pageRef].date_0 + "<br/>");
   /*other document.write,*/
  document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
}

answered Dec 01 '12 at 14:13

superpdm

11
3

Thanks superpdm. I presume I still need to incorporate a getElementById tag in here to have the text on the existing page update? – OneBigEgg Dec 01 '12 at 14:44
What I can't work out is this: I now have pageRef updating when the button is clicked (because it is now updating in the function): but how do I make the pageRef element in the body update: – OneBigEgg Dec 01 '12 at 14:51
document.write is not the way to go. Document.write executed after the page has finished loading will overwrite the page, or write a new page, or not work at all. See [this](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) for reference – OpherV Dec 01 '12 at 14:54

score 0 · Accepted Answer · answered Dec 01 '12 at 14:50

document.write is only read once as the page is being loaded into the browser, it's not really best practice to use it for updating dynamic content.

What you could do, is wrap up your dynamic content in a div like so:

    <div id="content"></div>

then write a function that populates this div from the JSON data (this could be a lot more elegant but as you're just starting out, for simplicity's sake):

function populatePageFromJson(JSONobject){
var divElement=document.getElementById("content");
divElement.innerHTML=JSONobject[pageRef].date_0+"<br/>"+ 
                     JSONobject[pageRef].entry_0+"<br/><br/>"+
                     JSONobject[pageRef].date_1+"<br/>"+ 
                     JSONobject[pageRef].entry_1+"<br/><br/>"+
                     JSONobject[pageRef].date_2+"<br/>"+ 
                     JSONobject[pageRef].entry_2+"<br/><br/>"
}

And when the page loads have this function load up:

window.onload= function() { 
        populatePageFromJson(diary_1938);
}

also change prevPage() and nextPage() as well (Note that in your case, you forgot to update pageRef):

  function prevPage() {
      counter--
      pageRef = "page_"+counter;
      document.getElementById("DiaryImage").src = "image_"+counter+".jpg";
      populatePageFromJson(diary_1938);
    }

Here is a jsFiddler example to tie it all up.

Again this is hardly the most elegant way of doing so, but hopefully it will give you some insight into Javascript.

Once you're comfortable with the understanding of basic Javascript I recommend you getting acquainted with jQuery. It will make such tasks much easier. Good luck!

Thankyou so much guys - that works perfectly! The opportunities are now endless - this advice is the best Christmas present come early I could have asked for - cheers! — OneBigEgg, Dec 01 '12 at 17:11

Javascript event handler to update a JSON object name

2 Answers2