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

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

可以通过将按钮（在链接页面的第692行）类型更改为＆＃34;按钮＆＃34;来防止提交：

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

不提交可能的表格。

消失的Javascript onClick Box，JS的新功能

1 个答案: