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

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);