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

Question

我正在学习 Api 我几乎是第一件事。有一个搜索按钮停止在移动设备上工作。找不到原因/你能看看吗？

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

如我所见，pokeapi.co/api/v2/pokemon/ 区分大小写，在移动设备上，键盘通常将首字母大写。

例如，如果您的移动键盘将 venusaur 更正为 Venusaur，则搜索将失败。

您可以考虑在阅读输入时添加一个 .toLowerCase() 来完全避免此问题。

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

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

Button work on desktop, resized to mobile but dont react on real mobile

javascript

api

mobile