更改从事件侦听器提取 URL

Question

我正在尝试从单击事件侦听器内部更改全局变量。但是，单击按钮后，变量将无法更改。此处的目标是更改抓取请求的网址。

// 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
      ...
    });
...

Answer 2

从事件侦听器内部删除变量

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

Answer 3

问题是你声明了两次var url，var req两次第一个在代码的开头，第二个在事件列表器中，

试试这个

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() {
 url = 'https://newsapi.org/v2/top-headlines?sources=cnn&apiKey=Apikey123';
   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();