title: How can I make certain fetch data appear after pressing a button. Using JavaScript and HTML
body: <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>window.onload = function() {
      oneUser()
  }
  
  
  const oneUser = () =&gt; {
  fetch('https://randomuser.me/api/')
  .then((response) =&gt; {
      return response.json();
  })
  .then((response) =&gt; {
      getPic(response);
  })
  
  }
  
  for (let i = 1; i &lt; 5; i++){
      oneUser();
  }
  
  const getPic = (response) =&gt; {
      // console.log(response.results.gender);
      let picText = `&lt;div&gt; &lt;img src="${response.results[0].picture.large}"/&gt; `;
      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}&lt;/div&gt;`;
      document.getElementById('picDiv').innerHTML += picText + info + moreData;
  
  }
  </code></pre>
  
  <p>And my HTML</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="container"&gt;
  
      &lt;div id="picDiv"&gt;
              &lt;button id="buttonData" onclick="getPic()"&gt;More details&lt;/button&gt;
  
      &lt;/div&gt;
  
      &lt;div id="dataDiv"&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>I've had troubles in the past with buttons. Any help is appreciated.
  Thanks</p>