Web按钮只能使用一次，然后我必须刷新页面
[英]Web button only works once, then I have to refresh page
问题描述
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.作为我的第一个 JS 项目，我决定创建一个简单的按钮，如果有人点击它，它会显示一个自定义弹出窗口。 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 个解决方案
解决方案1
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 .最简单的解决方案是使用toggle 。 In that case you can bind the same eventListener to both buttons and shorten the JS code drastically:在这种情况下，您可以将相同的 eventListener 绑定到两个按钮并大大缩短 JS 代码：
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>
解决方案2
2 2022-06-21 10:31:24
It's because you are adding open and overlay-open classes and never removing them.这是因为您正在添加open类和overlay-open类，并且永远不会删除它们。 So after hitting close, you have open and popClose on <div class="popup"> , and overlay-open and overlay-close on <div class="overlay"> .因此，在关闭后，您在<div class="popup">上有open和popClose ，在 <div class= <div class="overlay"> > 上有了overlay-open和overlay-close 。
And CSS specificity makes that the second classes apply.而 CSS 的特殊性使得第二类适用。 You could do as below, having 2 classes instead of 4. You just need open and overlay-open .你可以做如下，有 2 个类而不是 4 个。你只需要open和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>
解决方案3
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript“单击”按钮仅工作一次而不必刷新页面 - 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：提交没有页面刷新的表单只能运行一次 - 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
相关标签