使用按钮切换图片文字显示隐藏：初始隐藏时首次点击不生效如何解决

问题根因 #

element.style.display 只能读取元素行内style属性里设置的样式，你把display: none写在CSS样式表中时，首次触发点击事件时x.style.display拿到的是空值，所以判断会走入else分支，第一次点击实际是把样式设置为none，第二次点击才会匹配none的判断条件改为block，就出现了需要点击两次才生效的问题。

可用解决方案 #

方案1：把隐藏样式写在行内 #

直接把display: none写在对应div的行内style属性里，删除CSS里对应id的display配置即可，这样JS能直接读取到行内的display值。
修改后的HTML代码：

<div class="button-container"> 
  <button class="button-style" onclick="clickFunc1()">Button 1</button>
  <div id="id-1" style="display: none;">
   <p>Some text</p>
   <img src="images/some-image-1.jpg" alt="Some image">
  </div>
  <button class="button-style" onclick="clickFunc2()">Button 2</button>
  <div id="id-2" style="display: none;">
   <p>Some text</p>
   <img src="images/some-image-2.jpg" alt="Some more image">
  </div>
</div>

方案2：修改JS判断逻辑，读取实际生效的样式 #

用getComputedStyle方法获取元素最终渲染生效的样式，不管样式是写在样式表还是行内都能拿到，修改JS代码即可：

function clickFunc1() {
  var x = document.getElementById("id-1");
  // 获取实际生效的display值
  var currentDisplay = window.getComputedStyle(x).display;
  if (currentDisplay === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none"; 
  }
}
function clickFunc2() {
  var x = document.getElementById("id-2");
  var currentDisplay = window.getComputedStyle(x).display;
  if (currentDisplay === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";  
  }
}

优化方案：简化代码，复用逻辑 #

不需要为每个按钮单独写函数，通过传参复用逻辑，用class切换的方式更易维护：

1. 新增CSS公共类

.hidden {
  display: none;
}

2. 修改HTML，给对应div加hidden类，点击事件传对应id

<div class="button-container"> 
  <button class="button-style" onclick="toggleContent('id-1')">Button 1</button>
  <div id="id-1" class="hidden">
   <p>Some text</p>
   <img src="images/some-image-1.jpg" alt="Some image">
  </div>
  <button class="button-style" onclick="toggleContent('id-2')">Button 2</button>
  <div id="id-2" class="hidden">
   <p>Some text</p>
   <img src="images/some-image-2.jpg" alt="Some more image">
  </div>
</div>

3. 只保留一个公共JS函数即可

function toggleContent(id) {
  var el = document.getElementById(id);
  el.classList.toggle('hidden');
}

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