Configuré una solicitud de recuperación que solicita una frase aleatoria de una API. Esto se llama cuando la ventana se recarga o se carga inicialmente. Creé un botón que, al hacer clic, volvería a ejecutar la búsqueda que configuré. Actualmente no funciona y me sale este error:
TypeError no capturado (en promesa): 'buscar' invocado en un objeto que no implementa la ventana de interfaz.
Código JavaScript
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); });Simplemente envuelva su código con una función. No puedes llamar a buscar así.
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); }); }No vincule el controlador de clics directamente a fetch , eso simplemente no funcionará. Cree su propia función que llame a fetch() y vincule al oyente a eso
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 Para profundizar en el mensaje de error, se debe llamar a fetch vinculado al objeto de window . Cualquier detector de eventos está vinculado al elemento que desencadena el evento, por lo que sería como intentar llamar
const boundFetch = window.fetch.bind(generateBtn) boundFetch(event)lo que resulta en su error.
Debe envolver la llamada de búsqueda en una devolución de llamada personalizada, no se puede usar como argumento para agregarEventListener:
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();Su código original llama a fetch() al hacer clic sin pasar ninguna URL ni argumentos.