按钮分页

Question

我仍在学习成为初级前端并遇到以下问题 如果我按下搜索按钮，它会破坏页面可以找出原因。 https://codepen.io/DeanWinchester88/pen/ExvxdxX

你可以看看吗？

function searchPokemon(){
  let container = document.getElementById("container");
  container.insertAdjacentHTML("beforeend",`<div id="searchPokemonDiv"> ИТуц ыуфкс</div>`);
  let gotSearchPokemonDiv = document.getElementById("searchPokemonDiv");
  gotSearchPokemonDiv.innerHTML = `<form >
  <p>
    <label class="text">Search your pokemon</label><br>
    </p>
     <p>
    <label class="text">First name</label><br>
    <input type="text" name="name">
    </p>
      <p>
    <button id="pokemonSearchButton">Search</button>
  </p>
  </form>
  <div id="divForPokemonSearchResult">
  img
  </div>
  `;
  document.getElementById("pokemonSearchButton").addEventListener("click",  showPokemonSearchResult);
 
}
 function showPokemonSearchResult(){
    // document.getElementById("divForPokemonSearchResult").innerHTML = "VOT I RESULTAT";
    console.log("push to start")
  }

Answer 1

错误在这一行：

<button id="pokemonSearchButton">Search</button>

并通过将type="button"添加到相同的位置来修复它，即

<button type="button" id="pokemonSearchButton">Search</button>