JavaScript onclick事件需两次点击才生效，求改为单次点击解决方案

你的代码里判断元素显示状态的逻辑存在问题，导致第一次点击无法触发预期行为：

x.style.display === "none" 只能读取元素内联样式（即写在元素style属性里的样式），如果#recentsearch的初始隐藏状态是通过外部CSS、样式表或类设置的，第一次点击时x.style.display会是空字符串，不满足判断条件，反而会执行else分支把它设为none，第二次点击才会触发显示逻辑。

修复方案1：获取实际生效的样式 #

使用window.getComputedStyle()获取元素当前实际应用的样式，替代直接读取style.display：

const input = document.getElementById("divinput");
input.addEventListener("click", myFunction2);

function myFunction2() {
  var x = document.getElementById("recentsearch");
  var element = document.getElementById("searchbox");
  // 获取元素实际生效的display值
  const currentDisplay = window.getComputedStyle(x).display;
  
  if (currentDisplay === "none") {
    x.style.display = "block";
    element.style.borderRadius = "24px 24px 0px 0px";
  } else {
    x.style.display = "none";
    element.style.borderRadius = "24px";
  }
}

修复方案2：用CSS类控制显示隐藏（更推荐） #

将样式逻辑从JS中剥离，用CSS类来管理元素的显示状态和样式，不仅避免样式读取问题，还能让代码更易维护：

CSS 代码：

/* 控制最近搜索区域隐藏 */
.recent-search-hidden {
  display: none;
}
/* 搜索框完整圆角 */
.search-box-full-radius {
  border-radius: 24px;
}
/* 搜索框仅顶部圆角 */
.search-box-top-radius {
  border-radius: 24px 24px 0 0;
}

JS 代码：

// 提前获取DOM元素，避免重复查询
const input = document.getElementById("divinput");
const recentSearch = document.getElementById("recentsearch");
const searchBox = document.getElementById("searchbox");

input.addEventListener("click", toggleRecentSearch);

function toggleRecentSearch() {
  const isHidden = recentSearch.classList.contains("recent-search-hidden");
  
  if (isHidden) {
    recentSearch.classList.remove("recent-search-hidden");
    searchBox.classList.remove("search-box-full-radius");
    searchBox.classList.add("search-box-top-radius");
  } else {
    recentSearch.classList.add("recent-search-hidden");
    searchBox.classList.remove("search-box-top-radius");
    searchBox.classList.add("search-box-full-radius");
  }
}

HTML 调整：

确保#recentsearch初始添加隐藏类，#searchbox添加初始圆角类：

<div id="divinput" class="divinput">
  <input type="text" class="textarea">
</div>
<div id="recentsearch" class="recent-search-hidden">
  <!-- 最近搜索内容 -->
</div>
<div id="searchbox" class="search-box-full-radius">
  <!-- 搜索框容器 -->
</div>

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