<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.