如何使用 javascript 在网页上一次只访问一个表单
How to only access one form at a time on a webpage using javascript
您好,我正在尝试制作一个在线参考生成器,当用户单击我的 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";
}
Blockquote
if(openFormA || openFormW != null)
这表示如果以某种方式定义了 openFormA(似乎总是如此)或者 openFormW 不为空,则显示错误。我不认为这是你在这里的意图。
我认为你想要做的是遵循与此类似的方法
另附注。您可能不想将这些东西称为 'Forms',因为 HTML 中的表单完全是另外一回事 :)
您好,我正在尝试制作一个在线参考生成器,当用户单击我的 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";
}
Blockquote
if(openFormA || openFormW != null)
这表示如果以某种方式定义了 openFormA(似乎总是如此)或者 openFormW 不为空,则显示错误。我不认为这是你在这里的意图。
我认为你想要做的是遵循与此类似的方法
另附注。您可能不想将这些东西称为 'Forms',因为 HTML 中的表单完全是另外一回事 :)