正在消失的Javascript onClick框，JS新增

所以我创建了一个页面，应该在单击时打开一个框。虽然这在真空中工作，但当我将其上传到页面时，就像我使用按钮时一样，它最初会显示内容，然后“重新加载”页面，然后再次隐藏内容

我使用的Javascript代码片段是：`

<script>
function showVet() {
var x = document.getElementById('vetinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function showSust() {
var x = document.getElementById('sustinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function showGuarantee() {
var x = document.getElementById('guaranteeinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>`

函数showVet（）{
var x=document.getElementById（'vetinfo'）；
如果（x.style.display=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
}
函数showsut（）{
var x=document.getElementById（'sustinfo'）；
如果（x.style.display=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
}
函数showGuarrance（）{
var x=document.getElementById（'guaranteInfo'）；
如果（x.style.display=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
}
`

然后，在类似这样的HTML引用中（仅其中一个部分）：

整体兽医
批准
了解更多

您可以在此处查看该页面：

---

我对javascript还很陌生，所以我可能把事情搞砸了。当我在本地环境中测试页面时，它很好，我不确定哪里出错了

按钮的默认类型是“提交”。单击属性中调用

showVet

的按钮位于表单内部，因此它提交表单，重新加载页面

通过将按钮（链接页面第692行）类型更改为“按钮”，可以防止提交：

了解更多信息

---

它没有提交它可能所在的表单。

乍一看，这可能是一个简单的修复方法：从html中的onclick attr中删除括号。@7yl4r您似乎忽略了html中的事件处理程序属性文本在添加到DOM之前被编译成函数。对于要调用

showVet

的编译函数，括号是必需的。谢谢，我在“showVet”之后添加了return:false，从而解决了这个问题（可能很糟糕）；一串这可能不是最好的方法。我会尝试你的两个评论并回复你，我真的很感谢你的帮助。这会起作用，但在引入按钮元素之前，使用提交输入元素作为通用按钮实际上是HTML3的一种攻击。我建议在HTML4和更高版本中为通用按钮元素指定

type=“button”

。感谢大家的帮助。我将尝试实现您的注释，并在完成后使用适当的代码进行更新。

<div class="section feature bt10">
<h3>Holistic Veterinarian<br>Approved</h3>
<button class="HPbutton hidden-sm" onclick="showVet()">Learn More</button>
</div>

<button type="button" class="HPbutton hidden-sm" onclick="showVet()">Learn More</button>