StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>document.write</code> 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.</p> <p>What you could do, is wrap up your dynamic content in a div like so:</p> <pre><code> <div id="content"></div> </code></pre> <p>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):</p> <pre><code>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/>" } </code></pre> <p>And when the page loads have this function load up:</p> <pre><code>window.onload= function() { populatePageFromJson(diary_1938); } </code></pre> <p>also change <code>prevPage()</code> and <code>nextPage()</code> as well (Note that in your case, you forgot to update pageRef):</p> <pre><code> function prevPage() { counter-- pageRef = "page_"+counter; document.getElementById("DiaryImage").src = "image_"+counter+".jpg"; populatePageFromJson(diary_1938); } </code></pre> <p>Here is a <a href="http://jsfiddle.net/opherv/2yG4f/" rel="nofollow">jsFiddler example</a> to tie it all up.</p> <p>Again this is hardly the most elegant way of doing so, but hopefully it will give you some insight into Javascript.</p> <p>Once you're comfortable with the understanding of basic Javascript I recommend you getting acquainted with <a href="http://www.jquery.com" rel="nofollow">jQuery</a>. It will make such tasks much easier. Good luck!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload