How to only access one form at a time on a webpage using javascript-CodePudding

Hi I'm trying to make an online reference generator where when a user clicks one of the three buttons in my html a popup form will appear. The problem I'm having is that i want to restrict it to one form at a time, so if a user clicks another button an alert will appear telling them to close the existing form.

This is my html displaying the three buttons.

<div >
    <div >
        <h1>What would you like to reference?</h1>
        <button type="button1"  onclick="openForm()">
            <span >Book</span>
            <span ></span>
            <i ></i>
        </button>

        <button type="button1"  onclick="openFormW()">
            <span >Website</span>
            <span ></span>
            <i ></i>

        </button>
        <button type="button1"  onclick="openFormA()">
            <span >Article</span>
            <span ></span>
            <i ></i>
        </button>
    </div>
</div>

This is my javascript code which I'm trying to invoke an if statement into each function.

    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

CodePudding user response：

if(openFormA || openFormW != null)

This says if openFormA is defined is some way ( it seems it will always be) or openFormW is not null then show the error. I dont think that is what you intended here.

I think what you want to do is follow a similar approach as this Javascript radio button deselect others when selecting one radio button?

Also side note. You might want to not call these things 'Forms' as Forms in HTML are something else entirely :)