how manipulate CSS display property using active class with JS-CodePudding

I wished to output a small pop up window to confirm if the user want to escape or stay on the page however, as soon as i click on the RUN input id="openBtn" the pop up window appears then disappear right away. I dont know what i did wrong

CSS

.pop-up{
    display: none;
}

.pop-up.active{
    display: flex;
    position: absolute;
    background-color: #fff;
    font-size: 30px;
    color: #222831;
    flex-direction: column;
    align-items: center;
    height: 150px;
    width: 250px;
    top: 200px;
    left: 170px;
    border: 5px double #393E46;
    border-radius: 10px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3);
}

SCRIPT.JS

const openBtn = document.getElementById("openBtn");
const popUp = document.querySelector('.pop-up');
const stayBtn = document.getElementById("stayBtn");

openBtn.addEventListener('click', () =>{
    popUp.classList.add('active')
})

stayBtn.addEventListener('click', () =>{
    popUp.classList.remove('active')
})

HTML

<div >
                <div ></div>
                <form action="" method="post" >
                    <input type="submit" name="fight" value="FIGHT">
                    <input type="submit" name="pkmn" value="PKMN">
                    <input type="submit" name="item" value="ITEM">
                    <input type="submit" id="openBtn" value="RUN">
                
                </form>
            </div>
        </div>
        <div >
            <p>Escape battle?</p>
            <form action="" method="post" >
                <input type="submit"  id="stayBtn" name="stay" value="Stay">
                <input type="submit"  name="escape" id="run" value="Run">
            </form>
    </div>

I just wanted to have an confirm to exit option where i use a class to have the css display switch to none and flex.

CodePudding user response：

You are missing e.preventDefault() on your openBtn,

Inside the modal I used button type="button" instead of input="submit" which is better practice and with that you don't need e.preventDefault()

Note: I didn't change your input controls to button as I don't know what are you doing with it.

const openBtn = document.getElementById("openBtn");
const popUp = document.querySelector('.pop-up');
const stayBtn = document.getElementById("stayBtn");

openBtn.addEventListener('click', e => {
  e.preventDefault()
  popUp.classList.add('active')
})

stayBtn.addEventListener('click', () => {
  popUp.classList.remove('active')
})

.pop-up {
  display: none;
}

.pop-up.active {
  display: flex;
  position: absolute;
  background-color: #fff;
  font-size: 30px;
  color: #222831;
  flex-direction: column;
  align-items: center;
  height: 150px;
  width: 250px;
  top: 200px;
  left: 170px;
  border: 5px double #393E46;
  border-radius: 10px;
  box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.3);
}

<div >
  <div ></div>
  <form action="" method="post" >
    <input type="submit" name="fight" value="FIGHT">
    <input type="submit" name="pkmn" value="PKMN">
    <input type="submit" name="item" value="ITEM">
    <input type="submit" id="openBtn" value="RUN">
  </form>
</div>
<div >
  <p>Escape battle?</p>
  <button type="button"  id="stayBtn" name="stay">Stay</button>
  <button type="button"  name="escape" id="run" value="Run">Run</button>
</div>

CodePudding user response：

You are on a form .Whenever you click a button or input[submit],You will give a post request with the given values to the server .After sending the request ,the browser will show you its response by default .To not have the redirect, you have to add e.preventDefault().For this scenario, You will have to change to

openBtn.addEventListener('click', e => {
  e.preventDefault()
  popUp.classList.add('active')
})