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.
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>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')
})