javascript - 更改从事件监听器获取 URL？

Question

我正在尝试从单击事件监听器内部更改全局变量。但是，一旦单击按钮，该变量就无法更改。这里的目标是更改获取请求的 URL。

// Default URL
var url = 'https://newsapi.org/v2/top-headlines?sources=bbc-news&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&apiKey=Apikey123';
  var req = new Request(url);
  sendRequest();
})

// Fetch Data from API
function sendRequest() {
  fetch(req)
    .then(r => r.json())
    .then(r => {
      const container = document.getElementsByClassName('post-container')[0];

      for(i = 0; i < 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();

Answer 1

解决问题:

...
    document.getElementById('btn').addEventListener('click', function() {
      var url = 'https://newsapi.org/v2/top-headlines?sources=cnn&apiKey=Apikey123';
      // Don't use var, becouse it's variable have scope in current function
      // var req = new Request(url);
      req = new Request(url);
      sendRequest();
    })
...

但最好将参数发送到sendRequest:

...
    // Event Listener - Change URL
    document.getElementById('btn').addEventListener('click', function() {
      var url = 'https://newsapi.org/v2/top-headlines?sources=cnn&apiKey=Apikey123';
      var req = new Request(url);
      sendRequest(req); // <--- set param
    })

    // Fetch Data from API
    function sendRequest(req) { // <--- get param
      ...
    });
...