1

El problema es que al intentar pasar el valor del input a la URL de la API no la "reconoce", quisiera saber si hay alguna solución, adjunto mi código:

const pokeInput = document.getElementById('input').value
const btn = document.getElementById('btn')
const dataBox = document.getElementById('dataBox')
const url = `https://pokeapi.co/api/v2/pokemon/${pokeInput}`


fetch(url)
  .then(res => res.json())
  .then(data => {
    //Evento click, que en teoria deberia pasar por consola los datos del fetch
    btn.addEventListener('click', () => {
      console.log(data)
    })
  })
2
  • que es exactamente lo que no reconoce la url o el valor del input o el html del input o el api? el 14 feb. a las 21:48
  • estoy casi seguro que el problema es el orden en el que intentas hacer las cosas ... el 14 feb. a las 21:50

2 respuestas 2

1

basado en un hipotetico html con un campo y un boton con los datos que indicas; el problema radica en el orden y donde capturas el valor en el load del documento... no es lo adecuado, ya que el valor en el load es vacio (nulo), incluso cuando modificas y das el click sigue siendo vacio (nulo); en este caso lo combeniente seria inclur la captura del valor en el momento en que das el click:

Ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fetch API</title>
  </head>
  <body>
    <input id="input" type="text" placeholder="Ingresa un nombre de Pokemon">
    <button id="btn">Buscar Pokemon</button>
    <div id="dataBox"></div>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const btn = document.getElementById('btn')
        const dataBox = document.getElementById('dataBox')

        btn.addEventListener('click', () => {
          const pokeInput = document.getElementById('input').value
          const url = `https://pokeapi.co/api/v2/pokemon/${pokeInput}`

          fetch(url)
            .then(res => res.json())
            .then(data => {
              console.log(data)
              dataBox.textContent = JSON.stringify(data)
            })
        })
      })
    </script>
  </body>
</html>

como podras ver estoy usando DOMContentLoaded y pase la captura de pokeInput dentro del evento, el resultado lo podras ver en dataBox

0

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>

2
  • 1
    chame gusta mas tu respyesta que la mia el 14 feb. a las 22:03
  • @ArcanisGK507 jeje, le doy +1, también me parece buena :-) el 14 feb. a las 22:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.