how manipulate CSS display property using active class with JS

Question

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.

dippas · Accepted Answer · 2022-04-05 00:59:19Z

1

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>

edited Apr 5, 2022 at 0:59

answered Apr 5, 2022 at 0:46

dippas

60.8k15 gold badges125 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aurange Over a year ago

You changed your answer after I had made the comment. Apologies.

dorkcoding Over a year ago

but now that I used the code above I cant use $_POST to destroy and unset my session and redierect to poage index.php

dorkcoding Over a year ago

i mean hence why i was using input tags insted of buttons. but your code works best though

dippas Over a year ago

@dorkcoding then use your code and add e.preventDefault() in stayBtn listener as I did for openBtn

Musafiroon · Accepted Answer · 2022-04-05 01:06:59Z

0

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

answered Apr 5, 2022 at 1:06

Musafiroon

6661 gold badge8 silver badges21 bronze badges

1 Comment

dorkcoding Over a year ago

Thank you so much for the explanation! now i understand better how it should work. :D

Collectives™ on Stack Overflow

how manipulate CSS display property using active class with JS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related