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

【问题标题】：How to only access one form at a time on a webpage using javascript如何使用 javascript 在网页上一次仅访问一个表单
【发布时间】：2021-12-30 14:32:31
【问题描述】：

您好，我正在尝试制作一个在线参考生成器，当用户单击我的 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>

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

    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";
  }

块引用

【问题讨论】：

标签： javascript html forms web

【解决方案1】：

if(openFormA || openFormW != null)

这表示如果以某种方式定义了 openFormA（它似乎总是如此）或者 openFormW 不为空，则显示错误。我认为这不是您的本意。

我认为您想要做的是遵循与此类似的方法 Javascript radio button deselect others when selecting one radio button?

另外附注。您可能不想将这些东西称为“表单”，因为 HTML 中的表单完全是另外一回事 :)

【讨论】：