Question

我有三个按钮，其中的图像被隐藏。假设我按下“ Square”按钮，将弹出方形图像。当我按下“圆形”按钮时，将仅弹出圆形图像，并且将隐藏方形图像，反之亦然。但是，对于我的代码，当我单击按钮时，它将仅弹出页面顶部而不显示图像。

function showImage() {
  var image = document.getElementById('sqimg').style.visibility = "visible";
}

function showImage2() {
  var image = document.getElementById('cirimg').style.visibility = "visible";
}

function showImage3() {
  var image = document.getElementById('trimg').style.visibility = "visible";

}

<html>

<body>
  <div>
    <form>
      <button onclick="showImage()" name="square" value="Square">Square</button> &nbsp
      <button onclick="showImage2()" name="Circle" value="Circle">Circle</button> &nbsp
      <button onclick="showImage3()" name="Triangle" value="Triangle">Triangle 
    </button>
    </form>

    <form>
      <img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100">
      <img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100">
      <img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100">
    </form>
  </div>
</body>

</html>

Answer 1

创建三个函数，而不是三个单独的函数。在该单个函数中，传递要显示为参数的图像的id。

也使用css类代替内联样式。因此，在函数中检查是否存在类show的元素。如果存在，则从其中删除类show

默认按钮类型为submit，因此将按钮类型添加为button，否则它将能够提交表单

function showImage(elem) {
  if (document.getElementsByClassName('show')[0] !== undefined) {
    document.getElementsByClassName('show')[0].classList.remove('show');
  }
  var image = document.getElementById(elem).classList.add('show');
}

.hidden {
  visibility: hidden;
}

.show {
  visibility: visible;
}

<div>
  <form>
    <button type='button' onclick="showImage('sqimg')" name="square" value="Square">Square</button> &nbsp
    <button type='button' onclick="showImage('cirimg')" name="Circle" value="Circle">Circle</button> &nbsp
    <button type='button' onclick="showImage('trimg')" name="Triangle" value="Triangle">Triangle </button>
  </form>
</div>


<form>
  <img src="square.png" id="sqimg" class='hidden' width="100" height="100">
  <img src="circle.png" id="cirimg" class='hidden' width="100" height="100">
  <img src="triangle.png" id="trimg" class='hidden' width="100" height="100">
</form>

Answer 2

每次单击一个按钮时，页面都会刷新，因此看起来好像按钮不起作用。发生这种情况是因为您的按钮位于<form>中，因此您的表单每次单击按钮都将提交（因此刷新）页面。如果您删除<form></form>标记，则您的页面将不会刷新，因此可以解决您的问题。

请参见下面的工作示例：

<html>
<script>
  function showImage() {
    var image = document.getElementById('sqimg').style.visibility = "visible";
  }

  function showImage2() {
    var image = document.getElementById('cirimg').style.visibility = "visible";
  }

  function showImage3() {
    var image = document.getElementById('trimg').style.visibility = "visible";

  }
</script>

<body>
  <div>
    <button onclick="showImage()" name="square" value="Square">Square</button> &nbsp
    <button onclick="showImage2()" name="Circle" value="Circle">Circle</button> &nbsp
    <button onclick="showImage3()" name="Triangle" value="Triangle">Triangle </button>
  </div>

  <img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100" alt="square">
  <img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100" alt="circle">
  <img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100" alt="triangle">

</body>
</html>

Answer 3

这是因为在处理每个按钮的单击事件时，按钮控件具有form标签，因此无需使用 form ，

尝试以下代码：

function showImage() {
    var image = document.getElementById('sqimg').style.visibility="visible";
    document.getElementById('cirimg').style.visibility="hidden";
    document.getElementById('trimg').style.visibility="hidden";
}

function showImage2() {
    var image = document.getElementById('cirimg').style.visibility="visible";
    document.getElementById('trimg').style.visibility="hidden";
    document.getElementById('sqimg').style.visibility="hidden";
}

function showImage3() {
    var image = document.getElementById('trimg').style.visibility="visible";
    document.getElementById('cirimg').style.visibility="hidden";
    document.getElementById('sqimg').style.visibility="hidden";
}

<html>

<body>
<div>
<button onclick="showImage()" name="square" value="Square">Square</button> &nbsp 
<button onclick="showImage2()" name="Circle" value="Circle">Circle</button> &nbsp 
<button onclick="showImage3()" name="Triangle" value="Triangle">Triangle 
</button>
</div>

<form>
<img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100">
<img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100">
<img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100">
</form>
</html>

在HTML中按下按钮时无法显示图像

3 个答案: