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

Question

I am using next/previous buttons to show the corresponding items of an array. I am experiencing two issues...

1) when the page loads, I need to click previous or next two times before anything will happen

2) Let's say I'm at record ID 10 for example. If I press 'next' 5 times to get to record ID 15, then press 'previous', instead of taking me to 14, it will take me to ID 16. If I then hit previous again (and subsequent times), the ID will then decrease as normal. Same thing with previous: If I start at ID 15 and hit previous down to 10, clicking 'next' will take me to ID 9 instead of 11. Then, subsequent clicks of 'next' will increase the ID as normal.

Hopefully this will help explain what I mean... https://jsfiddle.net/mjcs351L/

This uses a super hero API. You will need your own to test the code but it's free and doesn't even ask you to sign up: https://www.superheroapi.com/

Thanks in advance for any guidance.

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

You should try and follow DRY (don't repeat yourself), it makes it easier to debug code. I've tweaked the code a bit to re-use components.

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