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