消失的Javascript onClick框，JS的新特性

Question

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

我使用的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>`

然后在引用的HTML中，如下所示(只是其中一个部分)：

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

您可以在此处查看该页面：https://www.onlynaturalpet.com/CompanyInfo/about-us-our-honest-promise.aspx

我是javascript的新手，所以我可能把事情搞砸了。当我在本地环境中测试页面时，它是正常的，我不确定哪里出错了！

Answer 1

按钮的默认类型是"submit“。在showVet属性中调用click的按钮位于表单内部，因此它提交重新加载页面的表单。

可以通过将按钮(在链接页面的第692行)类型更改为“button”来阻止提交：

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

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