"Exploring the dynamic manipulation of CSS display property through the use of an active class

Question

"Exploring the dynamic manipulation of CSS display property through the use of an active class

When attempting to implement a small pop-up window for user confirmation before navigating away from the page, I encountered an issue. Upon clicking the RUN button with the id "openBtn," the pop-up window briefly appears and then disappears. I'm unsure of what went 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 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 simply wanted to provide a confirmation option for users before exiting, switching between CSS display properties of none and flex.

javascript html css

Answer 1

Answer №1

You need to add e.preventDefault() to your openBtn,

In the modal, I recommend using button type="button" instead of input="submit" for better practice. This eliminates the need for e.preventDefault()

Please note: I have kept your input controls as is, as I am not sure how you are using them.

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>

Answer 2

You need to add e.preventDefault() to your openBtn,

In the modal, I recommend using button type="button" instead of input="submit" for better practice. This eliminates the need for e.preventDefault()

Please note: I have kept your input controls as is, as I am not sure how you are using them.

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>

Answer 3

Answer №2

When interacting with a form, each time you click a button or a submit input, a post request will be sent to the server with the provided values. By default, the browser will display the response from the server. To prevent the browser from redirecting, you must include e.preventDefault() in your code. In this specific case, you need to modify it to:

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

Answer 4

When interacting with a form, each time you click a button or a submit input, a post request will be sent to the server with the provided values. By default, the browser will display the response from the server. To prevent the browser from redirecting, you must include e.preventDefault() in your code. In this specific case, you need to modify it to:

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

"Exploring the dynamic manipulation of CSS display property through the use of an active class

Answer №1

Answer №2

Similar questions

Managing a promise and using async/await functions

Responsive Video Embed Using Bootstrap-5

"Organizing an object array based on a specified order array - a step-by-step

Tips for staying on the same tab after submitting the form

Upload files either one at a time or in bulk

Begin the div at a width of 0 pixels and expand it towards the right

Ways to automatically update React.js state when localStorage changes occur

Effortlessly sleek horizontal navigation bar designed with Liquid CSS

In what way can you reach an unfamiliar form within a controller?

Save the raw InputMask data in Formik with Material-UI

Preserving scroll position when updating a partial page template using Rails and AJAX

Using ReactJS to toggle a div upon clicking

Tips for utilizing the @Input directive within the <router-outlet></router-outlet> component

'OR' separated by the <hr> tag

Encountering an error when integrating my library with MUI

Utilize JavaScript to append elements to an array in each loop iteration, gradually building a single, unified

Transferring information to React (Native) hooks in a way similar to how it is done

Execute the script when the document is fully loaded

Pass a selected object to a dropdown/select change event using AngularJS

How to align the last item in the bottom row using Flexbox styling