Fatal编程技术网
  • javascript/
  • 更新JSON对象名称的Javascript事件处理程序

更新JSON对象名称的Javascript事件处理程序

javascript json

更新JSON对象名称的Javascript事件处理程序,javascript,json,dom-events,Javascript,Json,Dom Events,我刚开始使用Javascript，不知道是否有人会介意用我的查询为我指明正确的方向 我已经创建了一个JSON数组，现在希望在点击按钮时从数组中更新页面上的一些文本。我有一个更新图像的事件处理函数OK，但我无法确定如何在“nextPage”函数中更新对象名（pageRef），以便从数组的内容更新文本。我理解这可能是一个非常明显的问题，但如果能直接指出正确的方向，我将不胜感激 var diary_1938 = { 'page_1': { 'date_0': '1

我刚开始使用Javascript，不知道是否有人会介意用我的查询为我指明正确的方向

我已经创建了一个JSON数组，现在希望在点击按钮时从数组中更新页面上的一些文本。我有一个更新图像的事件处理函数OK，但我无法确定如何在“nextPage”函数中更新对象名（pageRef），以便从数组的内容更新文本。我理解这可能是一个非常明显的问题，但如果能直接指出正确的方向，我将不胜感激

    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>

var日记\u 1938={
“第1页”：{
'日期0'：'1月1日'，'条目0'：'这是第一行'，
'日期1'：'1月2日'，'条目1'：'这是第二行'，
“date_2”：“1月4日”，“entry_2”：“这是第三行”，
'img'：'image_1.jpg'}，
“第2页”：{
'日期0'：'1月12日'，'条目0'：'这是第一行'，
'日期1'：'1月13日'，'条目1'：'这是第二行'，
“日期2”：“1月14日”，“条目2”：“这是第三行”，
'img'：'image_2.jpg'}，
};
var计数器=1；
var pageRef=“第页”+计数器；
函数下一页（）{
柜台++
document.getElementById（“DiaryImage”）.src=“image_quo+counter+”.jpg”；
}
函数prevPage（）{
柜台--
document.getElementById（“DiaryImage”）.src=“image_quo+counter+”.jpg”；
}
> 


文件。书写（日记1938[pageRef]。日期0+“
”；
文件。书写（日记本\u 1938[pageRef]。条目\u 0+“

”）；
文件。书写（日记1938[pageRef]。日期1+“
”；
文件。书写（日记本1938[pageRef]。条目1+“

”；
文件。书写（日记1938[pageRef]。日期2+“
”；
文件。书写（日记本1938[pageRef]。条目2+“

”；
文件。填写（“”）；
因为每次单击按钮时都会调用您在nextPage（）中编写的代码。但是，您的代码如下：*var counter=1；var pageRef=“第页”+计数器；文件。书写（日记1938[pageRef]。日期0+“
”*在初始化时仅执行一次。因此，您最好将代码编写为：

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";
}

函数下一页（）{
计数器++；
pageRef=“page_u3;”+计数器；
/*明确书面内容之前*/
文件。书写（日记1938[pageRef]。日期0+“
”；
/*其他文件。请编写*/
document.getElementById（“DiaryImage”）.src=“image_quo+counter+”.jpg”；
}

文档。当页面加载到浏览器中时，write
仅被读取一次，使用它来更新动态内容并不是最佳做法

您可以做的是将动态内容包装在一个div中，如下所示：

    <div id="content"></div>
同时更改
prevPage（）
和
nextPage（）
（注意，在您的情况下，您忘记了更新pageRef）：

这是一个可以把一切都绑起来的方法

同样，这不是最优雅的方式，但希望它能让您对Javascript有一些了解

一旦您熟悉了基本Javascript，我建议您熟悉它。这将使这些任务变得容易得多。祝你好运

谢谢你。我假设我仍然需要在这里合并一个getElementById标记，以便更新现有页面上的文本？我无法解决的是：当单击按钮时，我现在有了pageRef更新（因为它现在在函数中更新）：但是我如何使正文中的pageRef元素更新：document.write（日记\u 1938[pageRef].date\u 0+“
”）；document.write不是一个好办法。页面加载完成后执行document.write将覆盖页面，或编写新页面，或根本不起作用。请参阅参考谢谢这么多人-这很好！机会现在是无穷无尽的-这是我可以要求的最好的圣诞礼物-加油s 
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/>"
}

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

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