Home/ Questions/Q 8924875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T07:32:17+00:00

I am just starting out in Javascript and was wondering if anyone would mind

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0