The CSS popup box fails to reset its data after being closed, and the closure button does not effectively close the popup

I am having an issue with a login popup on my website. Whenever I fill in the login or registration information and then close the popup, the next time I open it, the input box still contains the previous data. How can I reset the popup to always open with a fresh login page?

Additionally, the popup currently closes when I click on the cross area in the corner. However, I would like it to close when I click the login popup button again. As a newcomer to frontend development without knowledge of JavaScript, I'm seeking assistance. Thank you for your help.

Link to codepen

HTML-

<div class="wrapper">
        <span class="icon-close"><ion-icon name="close"></ion-icon></span>
        <div class="formBox Login">
            <h2>Login</h2>
            <form action="#">
                <div class="inputBox">
                    <span class="icon"><ion-icon name="mail"></ion-icon></span>
                    <input type="email" required>
                    <label for="email">Email</label>
                </div>
                <div class="inputBox">
                    <span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
                    <input type="password" required>
                    <label>Password</label>
                </div>
                <div class="remeberForgot">
                    <label>
                        <input type="checkbox">
                        Remember me
                    </label>
                    <a href="#">Forgot Password?</a>
                </div>
                <button type="submit" class="btnPop">Login</button>
                <div class="loginReg">
                    <p>Don't have an account?
                        <a href="#" class="registerLink">Register</a>
                    </p>
                </div>
            </form>
        </div>

JS-

const wrapper=document.querySelector('.wrapper');
const loginLink=document.querySelector('.loginLink');
const registerLink=document.querySelector('.registerLink');
const btnPop=document.querySelector('.btnLogin-popup');
const iconclose=document.querySelector('.icon-close');

registerLink.addEventListener('click', ()=>{
    wrapper.classList.add('active');
});

loginLink.addEventListener('click', ()=>{
    wrapper.classList.remove('active');
});

btnPop.addEventListener('click', ()=>{
    wrapper.classList.add('active-popup');
});

iconclose.addEventListener('click', ()=>{
    wrapper.classList.remove('active-popup');
});

The CSS file is lengthy so couldn't include it here. Please let me know if you need any clarification. Thank you for your understanding and support.

Answer №1

update: attempt utilizing the value attribute for the input fields to reset them, it could be beneficial:

    let email = document.querySelector('input[type="email"]');
    let password = document.querySelector('input[type="password"]');

iconclose.addEventListener('click', ()=>{
    email.value = ``;
    password.value = ``;
    wrapper.classList.remove('active-popup');
});

regarding the button, ensure you have swapped out the class name and make use of value to clear the inputs.

const btnPop = document.querySelector('.btnPop');
btnPop.addEventListener('click', ()=>{
    email.value = '';
    password.value = '';
    wrapper.classList.add('active-popup');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with the Dropdown menu in Metro UI CSS - not functioning properly

I have integrated the METRO UI CSS into my project and created a dropdown menu. The design looks great, but unfortunately, the dropdown list is not appearing as expected. To implement this feature, I followed the example provided on the following link: H ...

Using Vue.js causes an issue with Array.from(Object).forEach

When using vue.js 2 CLI, I typically define object data like this within the data() function: data(){ return{ user: { user_mail: '', user_password: '', user_confirm_password : '' ...

Issue with Spyscroll functionality

Having some trouble getting Spyscroll to work. Can anyone help me identify the issue? I've been at it all day... I've attempted both the javascript and html+css setups, but neither seem to be functioning correctly. Manually adding the "active" c ...

I prefer to have the boxes lined up horizontally, but they seem to be arranged vertically

I'm struggling to get the color boxes to display horizontally with spaces between them. Currently, they are showing up vertically in a column layout. I want 4 smaller color boxes within a larger grey box at the top layer, with margins and padding app ...

Display a div when hovering over another div

I have a menu that looks like this: https://i.sstatic.net/WqN33.png and I want to create a hover effect where another div shows up over each item, similar to this: https://i.sstatic.net/JRaoF.png However, I can't seem to figure out how to implemen ...

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

Crafting a horizontal sub-menu that sits between the parent element and the company logo

Seeking assistance with designing a navigation menu that places the navigation bar above the site logo. I envision the sub-menu expanding horizontally from the navigation bar and positioning itself between the parent navigation bar and the logo. The sub- ...

Can you explain the concept of asynchronous in the context of Ajax?

Can you explain the concept of Asynchronous in Ajax? Additionally, how does Ajax determine when to retrieve data without constantly polling the server? ...

What is the process for inserting a key value pair into a JSON object?

I am looking to enhance my JSON data by including a key-value pair in each object within the array. https://i.sstatic.net/48ptf.png My goal is to insert a key-value pair into every object in the students array. ...

Having trouble establishing a connection to SQL Server with tedious in Node.js

Trying to connect to the SQL Server "SQL.SCHOOL.EDU\STUDENTSQLSERVER,4500" from my school has been a real challenge for me using tedious. I am currently working on setting up a connection between my express back end and react front end. For now, I am ...

MongoDB does not treat aggregate match pipeline as equal to in comparisons

I've been tackling an aggregate pipeline task for MongoDB where I need to retrieve items that do not have a specific user ID. Despite my efforts, I'm struggling to get it right. I attempted using $not, $ne, and $nin in various ways but couldn&ap ...

Comparison between setTimeout for this.state and useState

When working with a class component, the code looks like this: setTimeout(() => console.log(this.state.count), 5000); Whereas when using hooks: const [count, setCount] = useState(0); setTimeout(() => console.log(count), 5000); If the setTimeout fun ...

Creating a custom image component in React that is capable of rendering multiple images

Apologies for my poor English, as I am fairly new to React (just started learning yesterday). I am interested in learning how to render a variable number of images. For example, if I specify the number of images with an array containing file names, I want ...

Modify the width of the progress bar in Bootstrap using AngularJS

I'm new to AngularJS and I'm attempting to dynamically update the width of a progress bar based on changes in my controller. Here is what I currently have: <span id="percentage">$ {{getTotal()}} ({{getPercentage()}}%)</span> <div ...

Sorting an array of objects keys according to the position of keys in another array

I have two arrays: one with the correct order of keys and values, and another array coming from a backend in an unsorted format. let arr1 = ['name', 'age', 'occupation', 'address'] let arr2 = [{'age': 20, ...

Modify the name of the document

I have a piece of code that retrieves a file from the clipboard and I need to change its name if it is named image.png. Below is the code snippet where I attempt to achieve this: @HostListener('paste', ['$event']) onPaste(e: ClipboardE ...

Is there a glitch preventing the connection between HTML and CSS in Notepad++ even though the link is correct?

I have encountered a puzzling situation that has left me scratching my head in confusion. Despite being a rookie, I've had experience with linking CSS files before and can't understand why it's not working this time around. This issue is per ...

Execute the assignment of exports.someFunction from within a callback function

My Express route is set up like this: app.get('/api/:type/:id', api.getItemById); The function api.getItemById resides in the api module within routes. However, inside the api module, I need to execute a function that connects to the database a ...

Is it possible to assign a deconstructed array to a variable and then further deconstruct it?

Is there a way to deconstruct an array, assign it to a variable, and then pass the value to another deconstructed variable all in one line of code? Take a look at what I want to achieve below: const { prop } = [a] = chips.filter(x => x.id == 1); Typic ...

Shade of a row within a PHP table

I have a table that is populated with data from a database. Is there a way for me to dynamically change the color of a row based on certain conditions from a JSON file? For example, if the temperature exceeds a set minimum value, I want to highlight the ro ...