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.
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.