title: Could someone tell me what I did wrong in displaying data from fetching api to my html page in the Hackers News?
body: <p>I am training on the Hacker News API project and I wanted to do it my way, I fetched the API with the following urls and I put a toggle_button function but when I try to put the variable data in this function nothing is displayed I do not know what is the problem can someone guide me?</p>
  <p>Here's my HTML CODE:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
      &lt;title&gt;ClonerNews&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h2&gt;Welcome To &lt;span&gt;ClonerNews&lt;/span&gt; !&lt;/h2&gt;
      &lt;div id=&quot;main&quot;&gt;
          &lt;button id=&quot;liveData&quot; class=&quot;category&quot; onclick=&quot;toggleButton('liveData');&quot;&gt;Live Data&lt;/button&gt;
          &lt;button id=&quot;topstories&quot; class=&quot;category&quot; onclick=&quot;toggleButton('topstories');&quot;&gt;Top Stories&lt;/button&gt;
          &lt;button id=&quot;stories&quot; class=&quot;category&quot; onclick=&quot;toggleButton('stories');&quot;&gt;Stories&lt;/button&gt;
          &lt;button id=&quot;jobs&quot; class=&quot;category&quot; onclick=&quot;toggleButton('jobs');&quot;&gt;Jobs&lt;/button&gt;
          &lt;button id=&quot;polls&quot; class=&quot;category&quot; onclick=&quot;toggleButton('polls');&quot;&gt;Polls&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
      &lt;span id=&quot;span_txt&quot; style=&quot;color: aliceblue;&quot;&gt;&lt;/span&gt;
  &lt;/body&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And here's my script.js</p>
  <pre><code>//url of news api
  var topStoriesUrl = &quot;https://hacker-news.firebaseio.com/v0/topstories.json&quot;;
  
  //url of particular news item
  var newItemUrl = &quot;https://hacker-news.firebaseio.com/v0/item/&quot;;
  
  let result = document.getElementById(&quot;result&quot;); seront affichées.
  
  
  //fetch data
  const fetchData = (url) =&gt; {
      return new Promise((resolve, reject) =&gt; {
          fetch(url)
          .then((res) =&gt; res.json())
          .then((data) =&gt; resolve(data))
          .catch((err) =&gt; reject(err));
  
      }); 
  };
  
  //show data
  const showData = async () =&gt; {
      var data = await fetchData(topStoriesUrl);
      console.log(data);
      data.map(async (d) =&gt; {
          let newsData = await fetchData(`${newItemUrl}${d}.
          json`);
          console.log(newsData);
      });
  };
  showData();
  
  const liveData = getElementById(&quot;liveData&quot;);
  const stories = getElementById(&quot;stories&quot;);
  const jobs = getElementById(&quot;jobs&quot;);
  const polls = getElementById(&quot;polls&quot;);
  
  function toggleButton() {
      var span = document.getElementById(&quot;span_txt&quot;);
      if(span.innerHTML != &quot;&quot;) {
        span.innerHTML = &quot;&quot;;
      } else {
        span.innerHTML = data
      }
  }
  </code></pre>