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

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

函数showImage（）{
var image=document.getElementById（'sqimg'）.style.visibility=“visible”；
}
函数showImage2（）{
var image=document.getElementById（'cirimg'）.style.visibility=“visible”；
}
函数showImage3（）{
var image=document.getElementById（'trimg'）.style.visibility=“visible”；
}

广场
圈
三角

每次单击某个按钮时，页面都会刷新，从而使您的按钮看起来好像不工作。之所以会出现这种情况，是因为您的按钮位于

中，因此每次单击按钮时，您的表单都会提交（从而刷新）页面。如果删除

标记，页面将不会刷新，从而解决问题

请参见下面的工作示例：

函数showImage（）{
var image=document.getElementById（'sqimg'）.style.visibility=“visible”；
}
函数showImage2（）{
var image=document.getElementById（'cirimg'）.style.visibility=“visible”；
}
函数showImage3（）{
var image=document.getElementById（'trimg'）.style.visibility=“visible”；
}
广场
圈
三角

这是因为当您处理每个按钮的单击事件时，按钮控件的

表单

标记，所以无需使用表单

请尝试以下代码：

函数showImage（）{
var image=document.getElementById（'sqimg'）.style.visibility=“visible”；
document.getElementById（'cirimg'）.style.visibility=“hidden”；
document.getElementById（'trimg'）.style.visibility=“hidden”；
}
函数showImage2（）{
var image=document.getElementById（'cirimg'）.style.visibility=“visible”；
document.getElementById（'trimg'）.style.visibility=“hidden”；
document.getElementById（'sqimg'）.style.visibility=“hidden”；
}
函数showImage3（）{
var image=document.getElementById（'trimg'）.style.visibility=“visible”；
document.getElementById（'cirimg'）.style.visibility=“hidden”；
document.getElementById（'sqimg'）.style.visibility=“hidden”；
}

广场
圈
三角

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

id

也可以使用css类而不是内联样式。因此，在函数中检查是否存在class

show

的元素。如果存在，则从中删除类

show

默认按钮类型为

submit

，因此将按钮类型添加为

button

，否则它将能够提交表单

函数showImage（elem）{
if（document.getElementsByClassName（'show'）[0]！==未定义）{
document.getElementsByClassName（'show'）[0].classList.remove（'show'）；
}
var image=document.getElementById（elem.classList.add（'show'）；
}

。隐藏{
可见性：隐藏；
}
.表演{
能见度：可见；
}

广场
圈
三角

谢谢！哦，如果我想在页面的相同位置显示图像，我是否要创建一个类并设置位置：相对于它？不确定！试试看！