i'm learning Api my nearly first thing. There is a search button that stop working at mobile. Can't find a reason/ could u have a look?

https://codepen.io/DeanWinchester88/pen/ExvxdxX

 function showPokemonSearchResult(){
    
   let enteredPokemonName = document.getElementById("pokemonNameByUser").value;
   targetPokemon = `https://pokeapi.co/api/v2/pokemon/${enteredPokemonName}`
    console.log("target pokemon",targetPokemon)
   
    fetch(targetPokemon)
       .then(res  =>  {
          if(res){
            console.log("Success");
            // console.log("res.json",res.json());
            return res.json()
            
            }else {
            console.log("Failure");
          }
         })
        .then(data  =>{
         
        let gotDivForPokemonSearchResult = document.getElementById("divForPokemonSearchResult");
        gotDivForPokemonSearchResult.innerHTML = `
        <h2>  ${data.name}</h2><br>
        <img src=${data.sprites["front_default"]}></img>
        <img src=${data.sprites["back_default"]}></img>
        <p >Weight: ${data.weight}</p>
        <p >Heigth: ${data.height}</p>
        <p >Base experience: ${data["base_experience"]}</p>
        `
        console.log(data.id)
          
    })
  }

CodePudding user response：

As I can see, pokeapi.co/api/v2/pokemon/ is case sensitive and from mobile the keyboard usually puts the first letter uppercase.

For example, if your mobile keyboard corrects venusaur with Venusaur the search will fail.

You might consider adding a .toLowerCase() when you read the input to avoid this issue at all.

let enteredPokemonName = document.getElementById("pokemonNameByUser").value.toLowerCase();