如何使用 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 中的表单完全是另外一回事 :)