技术求助：点击按钮需显示图片，当前却隐藏，如何反转该交互效果？

嗨，我来帮你搞定这个交互逻辑反转的问题～首先先提个小问题，你代码里有个笔误：document.getElementsById应该写成document.getElementById（注意是单数Element，这个方法是获取单个元素的，复数形式不存在哦），不修正的话代码会直接报错。

接下来回到逻辑反转的需求：你现在的代码是初始图片显示，点击按钮隐藏，再点击显示，要改成初始图片隐藏，点击按钮显示，再点击隐藏的话，有两种简单的实现方式：

方法一：调换逻辑分支，调整初始状态 #

直接把if和else里的操作互换，同时把初始的flag设为0，再给图片所在的div加上初始隐藏的样式：

<script>
var flag = 0; 
function coursework() { 
  if (flag == 0) { 
    document.getElementById("coursework").style.display = "block"; 
    flag = 1; 
  } else { 
    document.getElementById("coursework").style.display = "none"; 
    flag = 0; 
  } 
}
</script>
<button onclick="coursework()">Show Coursework</button> 
<div id="coursework" style="display:none"> 
  <img src="你的图片地址">
</div>

方法二：仅调整初始值和默认样式 #

如果你不想动分支里的代码，也可以只把初始flag设为0，同时给div#coursework加上style="display:none"，这样第一次点击时会走进else分支显示图片，后续的切换逻辑也会反过来：

<script>
var flag = 0; 
function coursework() { 
  if (flag == 1) { 
    document.getElementById("coursework").style.display = "none"; 
    flag = 0; 
  } else { 
    document.getElementById("coursework").style.display = "block"; 
    flag = 1; 
  } 
}
</script>
<button onclick="coursework()">Show Coursework</button> 
<div id="coursework" style="display:none"> 
  <img src="你的图片地址">
</div>

两种方法都能实现你要的“点击按钮显示图片”的初始交互，选哪种都可以～

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