Primer error:
Está mal estructurado tu código, no puedes tener un eventListener
dentro del fetch
, más bien, el eventListener
debe encerrar al fetch
para indicar que cuando hagamos clic en el botón, ocurra las instrucciones de adentro (el fetch
), así que, esto:
fetch(url)
.then(res => res.json())
.then(data => {
btn.addEventListener('click', () => { console.log(data) })
})
Debería ser así:
btn.addEventListener('click', () => {
fetch(url)
.then(res => res.json())
.then(data => { console.log(data) })
})
Segundo error:
Ahora, dentro del eventListener
se debería de capturar el valor de tu input, ya que, al tenerlo afuera, indicamos que capturamos el valor del input cuando cargue la página, y ese valor siempre será null
porque al cargar la página el valor del input es vacío. Lo que hice fue capturar el valor del input dentro del eventListener
y concatenar ese valor con la URL, quedando así:
btn.addEventListener('click', () => {
const pokeInput = document.getElementById('input').value // cada vez que ocurra el listener, capturo el valor del input...
const url = `https://pokeapi.co/api/v2/pokemon/${pokeInput}` // y lo concateno con la URL.
fetch(url)
.then(res => res.json())
.then(data => { console.log(data) })
})
Código completo:
const btn = document.getElementById('btn') // capturo al botón...
// y cuando haga clic al botón, entro al listener...
btn.addEventListener('click', () => {
const pokeInput = document.getElementById('input').value // capturo el valor del input...
const url = `https://pokeapi.co/api/v2/pokemon/${pokeInput}` // y lo concateno con la URL...
console.log("Valor de mi input =>", pokeInput)
fetch(url) // luego, hago fetch a esa URL...
.then(res => res.json())
.then(data => { console.log(data) }) // y muestro en consola la data que me trae el fetch.
})
<input type="text" id="input" value="pikachu">
<button id="btn">Buscar</button>