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

从事件侦听器

中删除var

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

Answer 2

问题是你要宣告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();

Answer 3

解决问题：

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

更改从事件侦听器获取URL？

3 个答案:

从事件侦听器