Question

我想在点击按钮时显示图像。但是，当我点击它时，按钮会隐藏图像。有没有办法扭转这种局面？这是我的代码。

var flag = 1;

function coursework() {
  if (flag == 1) {
    document.getElementsById("coursework").style.display = "none";
    flag = 0;
  } else {
    document.getElementById("coursework").style.display = "block";
    flag = 1;
  }
}

<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
  <img src="Wellcome.png" width="300">
</div>

谢谢：）

Answer 1

您最初可以将图片设置为display: none;，然后相应地更改if-else条件，以便首次点击时显示图片，然后在第二次点击时隐藏，依此类推。此外，它应该是getElementById而不是getElementsById。

document.getElementById("coursework").style.display="none";
var flag =1;
  function coursework() {
    if(flag==1)
    {
      document.getElementById("coursework").style.display="block"; 
      flag=0;
    }
  else{
    document.getElementById("coursework").style.display="none"; 
    flag=1;
  }
}

<button onclick="coursework()">Show Coursework</button>
<div id="coursework">
<img src="https://images.pexels.com/photos/87840/daisy-pollen-flower-nature-87840.jpeg?auto=compress&cs=tinysrgb&h=350" width="300">
</div>

Answer 2

我假设您最初隐藏图像的情况，当点击按钮时它会显示它，可能会与您想要的不同并尝试给出这个答案。请参阅以下代码

<html>
<body>

<button onclick="show()">Show Coursework</button>
<div id="coursework" style="display:none">
<img src="welcome.png" width="300">
</div>

<script>
function show(){
   document.getElementById("coursework").style.display="block"; 
}

</script>
</body>
</html>

希望这会有所帮助。

单击按钮时如何显示内容

2 个答案: