Call Fetch with Click-CodePudding

I have setup a fetch request that request a random phrase from an API. This is called when the window reloads or load initially. I created a button that when clicked would re-run the fetch I have setup. Currently it is not working and I am getting this error:

Uncaught (in promise) TypeError: 'fetch' called on an object that does not implement interface Window.

Javascript Code

var generateBtn = document.getElementById('generateSP');
generateBtn.addEventListener('click', fetch);

fetch('https://random-words-api.herokuapp.com/w?n=10')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: '  
          response.status);
        return;
      }
      response.json().then(function(data) {
        console.log(data);
        document.getElementById('w3review').value = data;
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

CodePudding user response：

Don't bind the click handler directly to fetch, that simply won't work. Create your own function that calls fetch() and bind the listener to that

const loader = async () => {
  try {
    const res = await fetch('https://random-words-api.herokuapp.com/w?n=10')
    if (!res.ok) {
      throw new Error(`${response.status}: ${await response.text()}`)
    }
    const data = await response.json()
    console.log(data);
    document.getElementById('w3review').value = data;
  } catch (err) {
    console.error(err)
  }
}

document.getElementById('generateSP').addEventListener('click', loader);

loader() // initial run

To elaborate on the error message, fetch must be called bound to the window object. Any event listener is bound to the element triggering the event so it would be like trying to call

const boundFetch = window.fetch.bind(generateBtn)
boundFetch(event)

which results in your error.

CodePudding user response：

Just wrap your code with a function. You can't call fetch like this.

var generateBtn = document.getElementById('generateSP');
generateBtn.addEventListener('click', fetchData);

function fetchData() {
  fetch('https://random-words-api.herokuapp.com/w?n=10')
    .then(function (response) {
      if (response.status !== 200) {
        console.log(
          'Looks like there was a problem. Status Code: '   response.status
        );
        return;
      }
      response.json().then(function (data) {
        console.log(data);
        document.getElementById('w3review').value = data;
      });
    })
    .catch(function (err) {
      console.log('Fetch Error :-S', err);
    });
}

CodePudding user response：

You need to wrap the fetch call in a custom callback, it cannot be used as an argument to addEventListener:

var generateBtn = document.getElementById('generateSP');
generateBtn.addEventListener('click', myFetcher);

function myFetcher() {
fetch('https://random-words-api.herokuapp.com/w?n=10')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: '  
          response.status);
        return;
      }
      response.json().then(function(data) {
        console.log(data);
        document.getElementById('w3review').value = data;
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  })
}
myFetcher();

Your original code calls fetch() on click with no url or arguments passed into it.