按钮单击事件失效，仅双击可触发的问题排查求助

• 问题根源：你用x.style.display === 'none'判断元素显示状态，但element.style只能读取元素的内联样式，而你的图片初始隐藏是通过CSS全局样式设置的display:none，这时候x.style.display是空字符串，不等于'none'。第一次点击时进入else分支，把内联样式设为'none'，等于没变化；第二次点击时，内联样式已经是'none'，才会触发显示逻辑，所以看起来必须双击才生效。

• 修复方案：

  1. 读取实际生效的样式（直接修改现有逻辑）：

     addEventListener('DOMContentLoaded', function() {
       const sadness = document.getElementById('btn-sadness');
       const happynes = document.getElementById('btn-happy');
     
       sadness.disabled = true;
     
       happynes.addEventListener('click', function() {
         const x = document.querySelector('.image');
         // 获取元素实际生效的display样式
         const currentDisplay = window.getComputedStyle(x).display;
         if (currentDisplay === 'none') {
           x.style.display = 'block';
         } else {
           x.style.display = 'none';
         }
       });
     });
     

  2. 类切换方案（更推荐，样式与逻辑分离）：
     先修改CSS，新增隐藏类：

     .container {
       width: 400px;
       margin: 0 auto;
       text-align: center;
     }
     
     .image-container {
       display: inline-block;
     }
     
     img {
       width: 170px;
       margin-bottom: 10px;
     }
     /* 新增隐藏类 */
     .img-hidden {
       display: none;
     }
     
     button {
       display: block;
       margin: 0 auto;
     }
     

     调整HTML，给图片加上初始隐藏类：

     <div class="container">
       <div class="image-container">
         <img class="image img-hidden" src="test-img.JPG" alt="img">
         <button id="btn-happy">Happy</button>
         <button id="btn-sadness">Sadness</button>
       </div>
     </div>
     

     最后简化JS逻辑：

     addEventListener('DOMContentLoaded', function() {
       const sadness = document.getElementById('btn-sadness');
       const happynes = document.getElementById('btn-happy');
     
       sadness.disabled = true;
     
       happynes.addEventListener('click', function() {
         const x = document.querySelector('.image');
         // 切换隐藏类
         x.classList.toggle('img-hidden');
       });
     });
     

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