如何显示数组的下一个/上一个项目？

Question

I'm writing the first item of an array to the screen, and would like to create Next/Previous buttons for array, but I can't get it to work. I have tried several methods, but I can't find suitable solution.

Can anyone help?

This is the last one I have tried:

        var data = [
            {"subject":"starcraft2",
             "date":"08.31",
             "dDay":"mon",
             "content1":"STARCRAFT2",
             "content2":"season2",
             "playerA":"Ju",
             "playerB":"Lee",
             "emblemA":"Terran",
             "emblemB":"Zerg",
             "result":"end"},
            {"subject":"starcraft2",
             "date":"08.29",
             "dDay":"wed",
             "content1":"STARCRAFT2",
             "content2":"season2",
             "playerA":"kim",
             "playerB":"joo",
             "emblemA":"Terran",
             "emblemB":"Protoss",
             "result":"end"},
         ];

         function prevAction() {
             // function (e) { // the e here is the event itself
             alert("Prev Click!");
                 // document.getElementById('subject').textContent = prevItem();
                 // document.getElementById('date').textContent = prevItem();
                 for (var i = 0; i<data.length; i++)
                     for (var j=0; j<data[i]; j++)
                         while(j === 0)
                         {
                            j == j++;
                            console.log(j);
                         }
                     console.log(data[j].date + ', ');
                     document.getElementById('date').textContent = data[j].date;
                     // document.getElementById('subject').textContent = j[0];
                 }

Answer 1

Here's the jist of how you'd accomplish this in pure Javascript:

getNextItem() {
  var index = document.getElementById("index").value;
  //add guards here to prevent array overflow/underflow
  if (data.length < index - 1) {
      index.value++; 
  }
  document.getElementById("DOM_ELEMENT_TO_ATTACH_DATA").innerHTML = data[index];
}

getPreviousItem() {
  var index = document.getElementById("index").value;
  //add guards here to prevent array overflow/underflow
  if (index > 0) {
    index.value--;
  } 
  document.getElementById("DOM_ELEMENT_TO_ATTACH_DATA").innerHTML = data[index];
}


<input id="index" type="hidden" name="index" value="0">
<button type="button" onclick="getNextItem()">Next Item</button>
<button type="button" onclick="getPreviousItem()">Previous Item</button>

Note that this will just attach the pure json data to a DOM element, it won't do anything fancy with it.

Furthermore, if you want to do anything more complex, I'd strongly recommend you look into using a library like jQuery or Angular as it's going to make your life a whole lot easier in the long run.