Hola, estoy tratando de hacer un generador de referencias en línea donde cuando un usuario haga clic en uno de los tres botones en mi html, aparecerá un formulario emergente. El problema que tengo es que quiero restringirlo a un formulario a la vez, por lo que si un usuario hace clic en otro botón, aparecerá una alerta que le indicará que cierre el formulario existente.

Este es mi html que muestra los tres botones.

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

Este es mi código javascript que estoy tratando de invocar una declaración if en cada función.

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

Cita en bloque