时间戳

首页 > 解决方案 > 按钮分页

javascript - 按钮分页

问题描述

我仍在学习成为初级前端，如果我按下搜索按钮它会破坏页面，则会出现以下问题，可以找出原因。 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")
  }

标签： javascripthtmlforms

解决方案

错误在这一行：

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

它是通过添加type="button"相同的，即

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

推荐阅读