点击Clear按钮后搜索框需两次点击才清空的问题排查

核心问题 #

你的代码里clearSearch函数逻辑错误：它没有直接执行清空搜索框的操作，而是给Clear按钮绑定了一个新的点击事件。

• 第一次点击Clear按钮时，wipeOut调用clearSearch，只是完成了事件绑定，并没有真正清空搜索框；
• 第二次点击时，之前绑定的点击事件才触发，搜索框才被清空。

修正方案 #

把clearSearch改成直接执行清空操作的逻辑，无需再给按钮绑定重复的点击事件（因为wipeOut已经是按钮点击触发的函数）：

修正后的JS代码

function clearSearch() { 
  // 直接清空搜索框，移除多余的事件绑定逻辑
  document.getElementById('searchBox').value = "";
}

function wipeOut() {
  let clearAll = document.getElementsByName("searchType");
  for(let i = 0; i < clearAll.length; i++) {
    clearAll[i].checked = false;
  }
  clearSearch();
  clearResults();
  clearMarkers(); 
}

更简洁的写法（可选）

你也可以直接把清空搜索框的逻辑整合到wipeOut里，省去clearSearch函数：

function wipeOut() {
  let clearAll = document.getElementsByName("searchType");
  for(let i = 0; i < clearAll.length; i++) {
    clearAll[i].checked = false;
  }
  // 直接在这里清空搜索框
  document.getElementById('searchBox').value = "";
  clearResults();
  clearMarkers(); 
}

这样修改后，点击一次Clear按钮就能同时完成单选按钮重置、搜索框清空、地图结果和标记清除的所有操作。

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