绑定onclick事件的按钮首次点击无响应 需两次点击才触发函数如何解决

问题原因 #

核心原因是代码中判断逻辑依赖HTMLElement.style属性读取元素样式，该属性仅能获取到元素行内style属性中定义的样式，无法读取外部CSS样式表、<style>标签内定义的样式。

• 初始状态下你应该是在CSS文件/样式标签中给.resume__subnav设置了display: none来隐藏导航，此时resNav.style.display读取到的值是空字符串，不满足=== "none"的判断条件
• 第一次点击时会直接进入else分支，给元素行内写入style="display: none"，相当于给已经隐藏的元素又设置了一次隐藏，视觉上没有变化，看起来就像第一次点击没触发
• 第二次点击时resNav.style.display已经能读取到行内设置的none，会进入if分支执行显示逻辑，表现为第二次点击才正常响应

修复方案 #

可任选以下任意一种方案解决：

1. 给元素添加初始行内样式
   直接在.resume__subnav元素上写死行内样式<div class="resume__subnav" style="display: none">，保证第一次读取style.display就能拿到none值。
2. 读取计算后的样式做判断
   把判断条件替换为读取浏览器计算后的最终样式：

// 替换原来的if判断条件
if (window.getComputedStyle(resNav).display === "none") {
  // 原有显示逻辑
} else {
  // 原有隐藏逻辑
}

3. 改用类名切换控制显隐（更推荐）
   避免直接操作行内样式，用CSS类控制状态，可维护性更高：
   首先在CSS中定义类：

.resume__subnav.hidden {
  display: none;
}

然后修改JS逻辑：

function resumeNavToggle() {
  // 原有变量定义不变
  resNav.classList.toggle('hidden')
  if (!resNav.classList.contains('hidden')) {
    resBtn.style.backgroundColor = "#01050a";
    licBtn.style.backgroundColor = "#010a13";
    couBtn.style.backgroundColor = "#010a13";
    // 其他原有样式修改逻辑
  }
}

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