初级前端开发求助：点击搜索按钮导致页面崩溃问题如何解决

表单内未指定type属性的<button>标签，浏览器会默认将其识别为submit类型的提交按钮，点击后会触发表单的默认提交行为，导致页面重载，这就是你感知到的“页面崩溃”的本质。

你可以任选其中一种实现：

• 方案1：明确按钮的type属性为普通按钮
  修改form内的按钮代码，添加type="button"声明：

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

• 方案2：在点击事件回调中阻止默认提交行为
  给showPokemonSearchResult函数添加事件参数，调用preventDefault()方法取消默认提交逻辑：

  function showPokemonSearchResult(event){
    event.preventDefault()
    // 后续你的业务逻辑
    console.log("push to start")
  }
  

额外优化建议 #

当前searchPokemon函数每次执行都会向页面插入一个id为searchPokemonDiv的元素，多次触发会导致页面出现重复id，属于不符合规范的写法，建议调用前先判断该元素是否已存在，存在的话直接复用，不存在再创建插入。

内容的提问来源于stack exchange，提问作者DeanWinchester88