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>