如何使用javascript在网页上一次只访问一个表单

Question

嗨，我正在尝试制作一个在线参考生成器，当用户单击我的html中的三个按钮之一时，会出现一个弹出表单。我遇到的问题是，我想一次将其限制为一个表单，所以如果用户单击另一个按钮，就会出现一个警告，告诉他们关闭现有表单。

这是我显示三个按钮的html。

<div class="front-page">
<div class="grid-container">
<h1>What would you like to reference?</h1>
<button type="button1" class="button1" onclick="openForm()">
<span class="button__text">Book</span>
<span class="button__icon"></span>
<i class="fas fa-book"></i>
</button>
<button type="button1" class="button1" onclick="openFormW()">
<span class="button__text">Website</span>
<span class="button__icon"></span>
<i class="fas fa-laptop"></i>
</button>
<button type="button1" class="button1" onclick="openFormA()">
<span class="button__text">Article</span>
<span class="button__icon"></span>
<i class="far fa-file-alt"></i>
</button>
</div>
</div>

这是我的javascript代码，我正试图在每个函数中调用if语句。

function openForm() {
if(openFormA || openFormW != null) {
alert("unable to open two forms at once, Please close existing form")
} else {
document.getElementById("bookForm").style.display = "block";
}
}
function closeForm() {
document.getElementById("bookForm").style.display = "none";
}
function openFormW() {
document.getElementById("websiteForm").style.display = "block";
}
function closeFormW() {
document.getElementById("websiteForm").style.display = "none";
}
function openFormA() {
document.getElementById("articleForm").style.display = "block";
}
function closeFormA() {
document.getElementById("articleForm").style.display = "none";
} 

区块报价

Answer 1

if(openFormA || openFormW != null)

这意味着，如果openFormA是以某种方式定义的(似乎总是这样(，或者openFormW不是null，那么显示错误。我不认为这是你在这里的意图。

我认为你想做的是遵循类似的方法选择一个单选按钮时，Javascript单选按钮是否取消选择其他单选按钮？

还有旁注。你可能不想把这些东西称为"表单"，因为HTML中的表单完全是另一回事：(