按钮在桌面上工作，调整为移动设备，但在真正的移动设备上没有反应

Question

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 class="text2">Weight: ${data.weight}</p>
        <p class="text2">Heigth: ${data.height}</p>
        <p class="text2">Base experience: ${data["base_experience"]}</p>
        `
        console.log(data.id)
          
    })
  }

Answer 1

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();