<p id='pstatus'>Press "Get Next" to fetch more data</p>

<button id='getnext'>Get another one</button>

<p>
  <b>Name: </b><span id='sname'></span>
</p>
<p>
  <b>Hair Color: </b><span id='shair'></span>
</p>
let currentPerson = 1;


async function getAnotherOne() {
  pstatus.textContent = 'Fetching data for: ' + currentPerson;
  const res = await fetch(`https://swapi.co/api/people/${currentPerson}/?format=json`);
  const data = await res.json();
  currentPerson += 1;
  pstatus.textContent = 'done';
  return data;
}

async function showNext() {
  const val = await getAnotherOne();
  sname.textContent = val.name;
  shair.textContent = val.hair_color;
}

getnext.addEventListener('click', showNext);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.