how manipulate CSS display property using active class with JS

Issue

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 class="controls">
                <div class="left"></div>
                <form action="" method="post" class="right">
                    <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 class="pop-up">
            <p>Escape battle?</p>
            <form action="" method="post" class="buttons">
                <input type="submit" class="button" id="stayBtn" name="stay" value="Stay">
                <input type="submit" class="button" 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.

Solution

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 class="controls">
  <div class="left"></div>
  <form action="" method="post" class="right">
    <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 class="pop-up">
  <p>Escape battle?</p>
  <button type="button" class="button" id="stayBtn" name="stay">Stay</button>
  <button type="button" class="button" name="escape" id="run" value="Run">Run</button>
</div>

Answered By - dippas