title: Change Fetch URL from event listener?
body: <p>I'm trying to change a global variable from inside a click event listener. However the variable fails to change once button is clicked. The objective here is to change a URL for a fetch request. </p>
  
  <pre><code>// Default URL
  var url = 'https://newsapi.org/v2/top-headlines?sources=bbc-news&amp;Apikey123';
  var req = new Request(url);
  
  // Event Listener - Change URL
  document.getElementById('btn').addEventListener('click', function() {
    var url = 'https://newsapi.org/v2/top-headlines?sources=cnn&amp;apiKey=Apikey123';
    var req = new Request(url);
    sendRequest();
  })
  
  // Fetch Data from API
  function sendRequest() {
    fetch(req)
      .then(r =&gt; r.json())
      .then(r =&gt; {
        const container = document.getElementsByClassName('post-container')[0];
  
        for(i = 0; i &lt; 5 ; i++) {
          // Create post elements
          const post = document.createElement('div');
          const postHeader = document.createElement('div');
          const postBody = document.createElement('div');
  
          // Set ID
          post.id = 'post';
          postHeader.id = 'post-header';
          postBody.id = 'post-body';
  
          // Append Elements
          container.appendChild(post);
          post.appendChild(postHeader);
          post.appendChild(postBody);
  
          // Post title data from array into div
          let article = r.articles[i];
          let title = article.title;
          let content = article.description;
          postHeader.innerHTML = title;
          postBody.innerHTML = content;
        }
        console.log(container);
      });
    }
    sendRequest();
  </code></pre>