如何在按下按鈕后顯示某些獲取數據。使用 JavaScript 和 HTML

Question

我已經使用 API 提取了一些數據並獲取。 但是我需要在按下按鈕后顯示一些數據。 我可以讓它出現，但我無法用按鈕讓它出現。

所以我希望在單擊按鈕時顯示變量“moreData”。 我已經考慮過創建另一個函數，但是我的 fetch 數據很不穩定，等等。 這是我的 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;

}

還有我的 HTML

<body>

<div id="container">

    <div id="picDiv">
            <button id="buttonData" onclick="getPic()">More details</button>

    </div>

    <div id="dataDiv">


    </div>

我過去在按鈕方面遇到過麻煩。 任何幫助表示贊賞。 謝謝

Answer 1

從這里開始，

for (let i = 1; i < 5; i++){
    oneUser(i);
}

在 for 循環中調用 api 時，還要傳遞索引，

然后像你一樣進行 api 調用，

function oneUser(i) {
  fetch('https://randomuser.me/api/')
.then((response) => {
    return response.json();
})
.then((response) => {
    getPic(response, i);
})
  .catch(error => {
  console.error(error);
})
}

有一個更改，將接收到的索引傳遞給getPic(i)函數..

然后在getpic() ，使用與picText 、 info和moreData相同的代碼，並將moreData附加到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;

然后從收到的索引i創建一個具有唯一id的按鈕。

<button id=moreData${i}>More details</button>

最初我們在顯示中單獨制作 moreData 部分，而不像，

<div id="moreData" style="display:none">

以及完整的功能，例如，

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

}

最后調用getMoreData() ，使用相同的 for 循環，你首先喜歡，

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

在上面的這個函數中，我們通過向每個按鈕添加唯一的moredata來使更多數據在單擊更多詳細信息按鈕后顯示。

工作示例

如何在按下按鈕后顯示某些獲取數據。使用 JavaScript 和 HTML

問題描述

1 個解決方案

解決方案1
0 已采納 2020-02-21 17:26:07

如何在按下按鈕后顯示某些獲取數據。 使用 JavaScript 和 HTML

問題描述

1 個解決方案

解決方案1 0 已采納 2020-02-21 17:26:07

如何在按下按鈕后顯示某些獲取數據。使用 JavaScript 和 HTML

解決方案1
0 已采納 2020-02-21 17:26:07