problem taking the value of getElementByID-CodePudding

var baseUrl = "https://pokeapi.co/api/v2/pokemon/";
var pokemonid = document.getElementById('pokemon_id').value;

function fetchPokemon(){
    fetch(`${baseUrl}&{pokemonid}`)
    .then(response => {
        return response.json()
    })
    .then(data => {
        console.log(data);
    }) 
}

fetchPokemon();

This code return me https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20' at url, how can I change pokeomonid.value for return the number or name on the input?

CodePudding user response：

i solve my problem using async await:

  const insertPokemon = async(a) => {
    const respuesta = await fetch('https://pokeapi.co/api/v2/pokemon/' a)
    const data = await respuesta.json()
    const {value} = data
    console.log(data)
    nombre.textContent = data.name
    id.textContent = "ID_" data.id
    img.src = data.sprites.front_default
    pokeTypes.textContent = data.types[0].type.name;
    pokeTypes2.textContent = data.types[1].type.name;  
    stats(value)  
}

form.addEventListener('submit', (event) =>{
    event.preventDefault(); 
    pokeTypes.textContent = "";
    pokeTypes2.textContent = "";
    insertPokemon(pokeselect.value.toLowerCase());
})