Web button only works once, then I have to refresh page
Question
I'm a bit new to web development. As my first project with JS, I decided to create a simple button, on which if someone clicks, it shows a custom popup. But the thing is after closing the popup window, I have to refresh the page to click the button again.
Here is my code so far:
const btn = document.querySelector('.btn'); const cloBtn = document.querySelector('.close'); const popUp = document.querySelector('.popup'); const overlay = document.querySelector('.overlay'); btn.addEventListener('click', () => { popUp.classList.add('open'); overlay.classList.add('overlay-open'); }); cloBtn.addEventListener('click', () => { popUp.classList.add('popClose'); overlay.classList.add('overlay-close'); })
body { margin: 0%; } .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } button { border: none; cursor: pointer; } .btn button { background-color: blue; padding: 15px 45px 15px 45px; font-size: large; font-weight: 700; color: rgb(255, 255, 255); border-radius: 10px; } .popup { width: 300px; background-color: rgb(228, 228, 228); height: 150px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; border-radius: 10px; z-index: 5; position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); visibility: hidden; } .popup button { background-color: rgb(255, 0, 55); padding: 10px 30px 10px 30px; font-size: medium; font-weight: 700; color: rgb(0, 0, 0); border-radius: 10px; } .overlay { height: 100%; width: 100%; background-color: rgba(133, 131, 131, 0.555); position: absolute; z-index: 2; visibility: hidden; } .overlay-open { visibility: visible; } .overlay-close { visibility: hidden; } .open { visibility: visible; animation: boxPop 0.3s ease-in; } @keyframes boxPop { from { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } to { position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); } } .popClose { animation: boxClo 0.3s ease-in; transform: translate(-50%, -50%) scale(0); } @keyframes boxClo { from { position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); } to { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"><button>Press Me</button></div> <div class="popup"> <div class="sentence">Hello Nice to Meet You!</div> <div class="close"><button>Close</button></div> </div> <div class="overlay"></div> <script src="app.js"></script> </body> </html>
3 answers
solution1
5 2022-06-21 10:29:23
The issue is, that both button presses adding a class but not removing the counter class. Simplest solution would be the usage of toggle . In that case you can bind the same eventListener to both buttons and shorten the JS code drastically:
const btn = document.querySelectorAll('.btn'); const popUp = document.querySelector('.popup'); const overlay = document.querySelector('.overlay'); btn.forEach(el => el.addEventListener('click', () => { popUp.classList.toggle('open'); overlay.classList.toggle('overlay-open'); }));
body { margin: 0%; } .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } button { border: none; cursor: pointer; } .btn button { background-color: blue; padding: 15px 45px 15px 45px; font-size: large; font-weight: 700; color: rgb(255, 255, 255); border-radius: 10px; } .popup { width: 300px; background-color: rgb(228, 228, 228); height: 150px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; border-radius: 10px; z-index: 5; position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); visibility: hidden; } .popup button { background-color: rgb(255, 0, 55); padding: 10px 30px 10px 30px; font-size: medium; font-weight: 700; color: rgb(0, 0, 0); border-radius: 10px; } .overlay { height: 100%; width: 100%; background-color: rgba(133, 131, 131, 0.555); position: absolute; z-index: 2; visibility: hidden; } .overlay-open { visibility: visible; } .overlay-close { visibility: hidden; } .open { visibility: visible; animation: boxPop 0.3s ease-in; } @keyframes boxPop { from { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } to { position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); } } .popClose { animation: boxClo 0.3s ease-in; transform: translate(-50%, -50%) scale(0); } @keyframes boxClo { from { position: absolute; top: 30%; left: 50%; transform: scale(1) translate(-50%, -50%); } to { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"><button>Press Me</button></div> <div class="popup"> <div class="sentence">Hello Nice to Meet You!</div> <div class="btn"><button>Close</button></div> </div> <div class="overlay"></div> <script src="app.js"></script> </body> </html>
solution2
2 2022-06-21 10:31:24
It's because you are adding open and overlay-open classes and never removing them. So after hitting close, you have open and popClose on <div class="popup"> , and overlay-open and overlay-close on <div class="overlay"> .
And CSS specificity makes that the second classes apply. You could do as below, having 2 classes instead of 4. You just need open and overlay-open .
const btn= document.querySelector('.btn'); const cloBtn=document.querySelector('.close'); const popUp=document.querySelector('.popup'); const overlay=document.querySelector('.overlay'); btn.addEventListener('click',()=>{ popUp.classList.add('open'); overlay.classList.add('overlay-open'); }); cloBtn.addEventListener('click',()=>{ popUp.classList.remove('open'); overlay.classList.remove('overlay-open'); })
body{ margin: 0%; } .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); } button{ border: none; cursor: pointer; } .btn button{ background-color: blue; padding: 15px 45px 15px 45px; font-size: large; font-weight: 700; color: rgb(255, 255, 255); border-radius: 10px; } .popup{ width: 300px; background-color: rgb(228, 228, 228); height: 150px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; border-radius:10px ; z-index: 5; position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); visibility: hidden; } .popup button{ background-color: rgb(255, 0, 55); padding: 10px 30px 10px 30px; font-size: medium; font-weight: 700; color: rgb(0, 0, 0); border-radius: 10px; } .overlay{ height: 100%; width: 100%; background-color: rgba(133, 131, 131, 0.555); position: absolute; z-index: 2; visibility: hidden; } .overlay-open{ visibility: visible; } /* .overlay-close{ visibility: hidden; }*/ .open{ visibility: visible; animation: boxPop 0.3s ease-in; } @keyframes boxPop { from { position: absolute; top: 50%; left: 50%; transform:translate(-50% ,-50%) scale(0); } to { position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); } } /* .popClose{ animation: boxClo 0.3s ease-in; transform:translate(-50% ,-50%) scale(0); }*/ @keyframes boxClo { from { position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); } to { position: absolute; top: 50%; left: 50%; transform:translate(-50% ,-50%) scale(0); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"><button>Press Me</button></div> <div class="popup"> <div class="sentence">Hello Nice to Meet You!</div> <div class="close"><button>Close</button></div> </div> <div class="overlay"></div> <script src="app.js"></script> </body> </html>
solution3
2 2022-06-21 10:33:27
You have to remove old class after each function execution to work it properly.
const btn= document.querySelector('.btn'); const cloBtn=document.querySelector('.close'); const popUp=document.querySelector('.popup'); const overlay=document.querySelector('.overlay'); btn.addEventListener('click',()=>{ popUp.classList.add('open'); overlay.classList.add('overlay-open'); popUp.classList.remove('popClose'); overlay.classList.remove('overlay-close') }); cloBtn.addEventListener('click',()=>{ popUp.classList.remove('open'); overlay.classList.remove('overlay-open'); popUp.classList.add('popClose'); overlay.classList.add('overlay-close'); })
body{ margin: 0%; } .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); } button{ border: none; cursor: pointer; } .btn button{ background-color: blue; padding: 15px 45px 15px 45px; font-size: large; font-weight: 700; color: rgb(255, 255, 255); border-radius: 10px; } .popup{ width: 300px; background-color: rgb(228, 228, 228); height: 150px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; border-radius:10px ; z-index: 5; position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); visibility: hidden; } .popup button{ background-color: rgb(255, 0, 55); padding: 10px 30px 10px 30px; font-size: medium; font-weight: 700; color: rgb(0, 0, 0); border-radius: 10px; } .overlay{ height: 100%; width: 100%; background-color: rgba(133, 131, 131, 0.555); position: absolute; z-index: 2; visibility: hidden; } .overlay-open{ visibility: visible; } .overlay-close{ visibility: hidden; } .open{ visibility: visible; animation: boxPop 0.3s ease-in; } @keyframes boxPop { from { position: absolute; top: 50%; left: 50%; transform:translate(-50% ,-50%) scale(0); } to { position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); } } .popClose{ animation: boxClo 0.3s ease-in; transform:translate(-50% ,-50%) scale(0); } @keyframes boxClo { from { position: absolute; top: 30%; left: 50%; transform:scale(1) translate(-50% ,-50%); } to { position: absolute; top: 50%; left: 50%; transform:translate(-50% ,-50%) scale(0); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="btn"><button>Press Me</button></div> <div class="popup"> <div class="sentence">Hello Nice to Meet You!</div> <div class="close"><button>Close</button></div> </div> <div class="overlay"></div> <script src="app.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript 'click' button only works once than have to refresh page
Toggling of radio button only works once (refresh)?
Refresh/Reload web page only once
i want my page refresh only once
AJAX: Submitting form without page refresh only works once
The button only works once
How to let mute/unmute button appears only in a proper section of the page once I refresh/enter the site?
How to disable refresh button once user goes on a particular web page?
Refresh Web Page only once after submitting the form?
on click button works only after refresh my page
Related Tags