onclick事件首次点击失效，需点击两次才生效的问题排查

遇到的首次点击无响应、需连续点击两次才生效的问题，来自样式读取逻辑的固有缺陷：

• element.style.xxx 仅能读取元素通过HTML内联样式（即直接写在标签style属性上的样式）设置的属性值，无法读取外部CSS/内部样式表中通过选择器定义的生效样式。
• 代码里#discountbigbox的初始高度0px是写在CSS规则里的，没有设置对应的内联样式，因此首次触发函数时，gwbtn.style.height的实际返回值是空字符串，和判断条件里写的"0px"完全不匹配。
• 第一次点击时，判断条件不会命中if分支，会直接走else逻辑，把本来就是0px的高度重复设置为0px，视觉上没有任何变化；等第一次函数执行完成后，JS已经给元素写入了内联的height:0px，第二次点击时读取到的高度值才会匹配判断条件，触发预期的切换效果。

可根据实际场景选择任意一种修复方式：

• 更换样式读取API，用window.getComputedStyle()获取元素实际渲染的样式值，替换原来的gwbtn.style.height读取逻辑，修改后的完整JS代码为：

  function myFunction99() {
    var gwbtn = document.getElementById("discountbigbox");
    var gwbtnbig = document.getElementById("discountprice");
    // 读取元素实际生效的高度值，不受内联/非内联样式限制
    const currentHeight = window.getComputedStyle(gwbtn).height;
    if (currentHeight === "0px") {
        gwbtn.style.height = "210px";
        gwbtnbig.style.border = "1px solid black";
        gwbtnbig.style.color = "black";
    } else {
        gwbtn.style.height = "0px";
        gwbtnbig.style.border = "1px solid #cccccc";
        gwbtnbig.style.color = "#999";
    }
  }
  

• 给#discountbigbox元素补充和CSS一致的内联初始样式，让首次执行函数时就能读到匹配的高度值，对应修改HTML为：

  <div id="discountbigbox" style="height:0px"> 
    <p>测试内容</p>
  </div>
  

• 独立状态标记方案（更稳妥的实现方式）：不依赖读取样式值判断切换状态，用独立变量记录当前的展开/收起状态，从根源上规避样式读取的兼容问题：

  // 提前记录元素初始为收起状态
  let isBoxExpanded = false;
  function myFunction99() {
    var gwbtn = document.getElementById("discountbigbox");
    var gwbtnbig = document.getElementById("discountprice");
    isBoxExpanded = !isBoxExpanded;
    if (isBoxExpanded) {
        gwbtn.style.height = "210px";
        gwbtnbig.style.border = "1px solid black";
        gwbtnbig.style.color = "black";
    } else {
        gwbtn.style.height = "0px";
        gwbtnbig.style.border = "1px solid #cccccc";
        gwbtnbig.style.color = "#999";
    }
  }
  

  这种方式还能避免不同浏览器对getComputedStyle返回值的格式差异问题（比如部分浏览器会把渲染高度返回带小数的字符串，导致值匹配失败）。

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