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 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>

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