Popup will not reopen after closing-CodePudding

I have a div "button" that opens a popup. When you click on the popup, it runs

function theFunctionAbout() {
    var popup = document.getElementById("thePopupAbout");
    popup.classList.add("show");
    
  }

and it will add show, which is visibility:visible; when you click a button in the popup, it runs

function theFunctionAboutClose(){
    var popup = document.getElementById("thePopupAbout");  
    popup.classList.add("hide");
  }

and it will add hide, which runs display:none;.

After hitting the button, the popup closes, but never opens again. How do i fix this?

I have tried switching add.("hide") to remove.("show"). This works on another popup where the popup window is part of a dive form element, and that popup is reopenable, However, my popup window here has a paragraph element. When i tried to do remove.("show") on my about popup, the button would not close the window.

My button:

<div  onclick="theFunctionAbout()">About
        <p  id="thePopupAbout">
            <span >
                Mathalassa is a fun and educational math game that offers students from varying ages and grades to learn and perfect their math skills.
            </span>

            <button  onclick="theFunctionAboutClose()">x</button>
        </p>
    </div>

Another button:

<div  onclick="theFunctionOld()">Old User 
        <form  id="thePopupOld">
            <label  for="name">Please Enter Your Username:</label>

                <div >
                    <input  type="text" name="username" id="user" required minlength="2" maxlength="15" size="10" >
                </div>

                <div >
                    <input  type="Submit" name="login-btn" id="user">
                </div>

            <button  onclick="theFunctionOldClose()">x</button>

        </form>
    </div>

CodePudding user response：

instead of using two differents fonctions for open/close the popup you can use element.classList.toggle("hide"); which will create less problems for the hierarchy of the css of each class

CodePudding user response：

When you are using the add method you're appending a class to existent classes.
let's say you've shown and hidden the element several times your element className string would be as the following:

and you don't want that so replace the two function with the following so when you add hide class you'll remove show and so on...

function theFunctionAbout() {
    var popup = document.getElementById("thePopupAbout");
    popup.classList.remove("hide");
    popup.classList.add("show");
  }

function theFunctionAboutClose(){
    var popup = document.getElementById("thePopupAbout");  
    popup.classList.remove("show")
    popup.classList.add("hide");
  }