顯示數組的下一個/上一個項目

Question

我使用next / previous按鈕顯示數組的相應項。 我遇到兩個問題......

1）當頁面加載時，我需要在發生任何事情之前單擊上一次或下兩次

2）假設我的記錄ID為10。 如果我按下'next'5次來記錄ID 15，然后按'previous'，而不是帶我到14，它將帶我到ID 16.如果我然后再次擊中前一次（和隨后的時間），ID然后將正常減少。 與之前的情況相同：如果我從ID 15開始並將前一個下降到10，單擊“下一步”將帶我到ID 9而不是11.然后，隨后點擊“下一步”將正常增加ID。

希望這有助於解釋我的意思... https://jsfiddle.net/mjcs351L/

這使用超級英雄API。 您需要自己測試代碼，但它是免費的，甚至不會要求您注冊： https ： //www.superheroapi.com/

提前感謝任何指導。

var apiKey = "YOUR API";
var charID = Math.floor((Math.random() * 731) + 1);
var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + charID;
var req = new XMLHttpRequest();
req.open('GET', website, true);
req.setRequestHeader('Content-Type', 'application/json');

req.addEventListener('load', function() {
  var result = JSON.parse(req.responseText);
  getinfo();

  function getinfo() {
    document.getElementById('fullname').innerHTML = result.biography["full-name"];
    document.getElementById('name').innerHTML = result.name;
    document.getElementById('egos').innerHTML = result.biography["alter-egos"];
    document.getElementById('charID').innerHTML = result.id;
    document.getElementById('birth').innerHTML = result.biography["place-of-birth"];
    document.getElementById('height').innerHTML = result.appearance.height;
    document.getElementById('weight').innerHTML = result.appearance.weight;
    document.getElementById('gender').innerHTML = result.appearance.gender;
    document.getElementById('race').innerHTML = result.appearance.race;
    document.getElementById('eye').innerHTML = result.appearance["eye-color"];
    document.getElementById('hair').innerHTML = result.appearance["hair-color"];
    document.getElementById('occupation').innerHTML = result.work.occupation;
    document.getElementById('connections').innerHTML = result.connections["group-affiliation"];
    document.getElementById('relatives').innerHTML = result.connections.relatives;
    document.getElementById("pic").src = result.image.url;
    document.getElementById("pic").style.height = 300;
    document.getElementById("pic").style.width = 300;
  }



  function nextItem() {
    var test = charID + 1;
    var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + test;
    req.open('GET', website, true);
    req.setRequestHeader('Content-Type', 'application/json');
    req.addEventListener('load', function() {
      var result = JSON.parse(req.responseText);
      charID = test;
      getinfo();
    });
    req.send(null);
  }

  function prevItem() {
    var test = charID - 1;
    var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + test;
    req.open('GET', website, true);
    req.setRequestHeader('Content-Type', 'application/json');
    req.addEventListener('load', function() {
      var result = JSON.parse(req.responseText);
      charID = test;
      getinfo();
    });
    req.send(null);
  }


  document.getElementById('prev_button').addEventListener('click', function(e) {
    prevItem();
  });

  document.getElementById('next_button').addEventListener('click', function(e) {
    nextItem();
  });

  event.preventDefault();
});
req.send(null);

Answer 1

您應該嘗試並遵循DRY（不要重復自己），這樣可以更輕松地調試代碼。 我已經調整了一些代碼來重用組件。

var apiKey = "YOUR API";
var charID = Math.floor((Math.random() * 731) + 1);

function fetchData(id) {
  id = id || charID;
  var website = "https://www.superheroapi.com/api.php/" + apiKey + "/" + id;
  var req = new XMLHttpRequest();
  req.open('GET', website, true);
  req.setRequestHeader('Content-Type', 'application/json');

  req.addEventListener('load', function() {
    var result = JSON.parse(req.responseText);
    getinfo(result);
  });
  req.send(null);
}

fetchData()

function getinfo(result) {
  document.getElementById('fullname').innerHTML = result.biography["full-name"];
  document.getElementById('name').innerHTML = result.name;
  document.getElementById('egos').innerHTML = result.biography["alter-egos"];
  document.getElementById('charID').innerHTML = result.id;
  document.getElementById('birth').innerHTML = result.biography["place-of-birth"];
  document.getElementById('height').innerHTML = result.appearance.height;
  document.getElementById('weight').innerHTML = result.appearance.weight;
  document.getElementById('gender').innerHTML = result.appearance.gender;
  document.getElementById('race').innerHTML = result.appearance.race;
  document.getElementById('eye').innerHTML = result.appearance["eye-color"];
  document.getElementById('hair').innerHTML = result.appearance["hair-color"];
  document.getElementById('occupation').innerHTML = result.work.occupation;
  document.getElementById('connections').innerHTML = result.connections["group-affiliation"];
  document.getElementById('relatives').innerHTML = result.connections.relatives;
  document.getElementById("pic").src = result.image.url;
  document.getElementById("pic").style.height = 300;
  document.getElementById("pic").style.width = 300;
}


function nextItem(ev) {
  ev.preventDefault();
  fetchData(++charID)
}

function prevItem(ev) {
  ev.preventDefault();
  fetchData(--charID)
}

document.getElementById('prev_button').addEventListener('click', prevItem);

document.getElementById('next_button').addEventListener('click', nextItem);