How can I make certain fetch data appear after pressing a button. Using JavaScript and HTML
Question
I've pulled some data using an API and fetch. But I need some of the data to appear after pressing a button. I can get it to appear, but I'm having trouble making it appear with a button.
So I want the variable 'moreData' to be displayed on button click. I've thought about making another function, but then my fetch data is wonky, and such. Here's my JS.
window.onload = function() {
oneUser()
}
const oneUser = () => {
fetch('https://randomuser.me/api/')
.then((response) => {
return response.json();
})
.then((response) => {
getPic(response);
})
}
for (let i = 1; i < 5; i++){
oneUser();
}
const getPic = (response) => {
// console.log(response.results.gender);
let picText = `<div> <img src="${response.results[0].picture.large}"/> `;
let info = `${response.results[0].name.first}, ${response.results[0].name.last} `;
let moreData = `${response.results[0].dob.date}, ${response.results[0].location.street.name}, ${response.results[0].location.street.number}</div>`;
document.getElementById('picDiv').innerHTML += picText + info + moreData;
}
And my HTML
<body>
<div id="container">
<div id="picDiv">
<button id="buttonData" onclick="getPic()">More details</button>
</div>
<div id="dataDiv">
</div>
I've had troubles in the past with buttons. Any help is appreciated. Thanks
1 answers
solution1
0 ACCPTED 2020-02-21 17:26:07
Start from here,
for (let i = 1; i < 5; i++){
oneUser(i);
}
While calling the api inside for loop, pass index as well,
Then do api call as like yours,
function oneUser(i) {
fetch('https://randomuser.me/api/')
.then((response) => {
return response.json();
})
.then((response) => {
getPic(response, i);
})
.catch(error => {
console.error(error);
})
}
with one change that passing the received index to the getPic(i) function..
Then in getpic() , have the same code as like you did for picText , info , and moreData and append these to picDiv innerHTML..
const picText = `<div> <img src="${response.results[0].picture.large}"/> `;
const info = `${response.results[0].name.first}, ${response.results[0].name.last} `;
document.getElementById('picDiv').innerHTML += picText + info;
const moreData = `<div id="moreData" style="display:none"> ${response.results[0].dob.date}, ${response.results[0].location.street.name}, ${response.results[0].location.street.number}</div>`;
document.getElementById('picDiv').innerHTML += moreData;
Then create a button with unique id from received index i ..
<button id=moreData${i}>More details</button>
Initially we are making the moreData section alone in display none like,
<div id="moreData" style="display:none">
and the complete function like,
function getPic(response, i){
const picText = `<div> <img src="${response.results[0].picture.large}"/> `;
const info = `${response.results[0].name.first}, ${response.results[0].name.last} `;
document.getElementById('picDiv').innerHTML += picText + info;
const moreData = `<div id="moreData" style="display:none"> ${response.results[0].dob.date}, ${response.results[0].location.street.name}, ${response.results[0].location.street.number}</div>`;
document.getElementById('picDiv').innerHTML += moreData;
const button = `<button id=moreData${i}>More details</button> <br /><br />`;
document.getElementById('picDiv').innerHTML += button;
getMoreData();
}
At the end call getMoreData() , with same for loop you did first like,
function getMoreData(){
for (let i = 1; i < 5; i++) {
const elem = document.getElementById('moreData' + i);
if(elem){
elem.addEventListener('click', () => {
document.getElementById('moreData' + i).previousSibling.style.display = "block"
});
}
}
}
In this above function we are making the moredata to be displayed once clicking on the more details button by adding unique eventlistener to each button..
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.