Как сделать так, чтобы определенные данные выборки появлялись после нажатия кнопки. Использование JavaScript и HTML - PullRequest
Новая
       1

Как сделать так, чтобы определенные данные выборки появлялись после нажатия кнопки. Использование JavaScript и HTML

0 голосов
/ 21 февраля 2020

Я вытащил некоторые данные с помощью API и получил. Но мне нужно, чтобы некоторые данные появлялись после нажатия кнопки. Я могу заставить его появляться, но у меня возникают проблемы с его отображением с помощью кнопки.

Поэтому я хочу, чтобы переменная 'moreData' отображалась при нажатии кнопки. Я думал о создании другой функции, но тогда мои извлекаемые данные были шаткими и тому подобное. Вот мой 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>

В прошлом у меня были проблемы с кнопками. Любая помощь приветствуется. Спасибо

1 Ответ

0 голосов
/ 21 февраля 2020

Начните отсюда, 

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

При вызове API внутри для l oop, также передайте index,

Затем выполните вызов 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 и добавьте их к picDiv inner HTML .. 

  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;

Затем создайте кнопку с уникальным id из полученного индекса i ..

<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(), с тем же для l oop, который вы сначала сделали, как 

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, который будет отображаться после нажатия кнопки более подробной информации, добавляя уникальный обработчик событий в каждая кнопка ..

Рабочий пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...