[英]classList.add() is not working | Vanilla JavaScript
我的网页中有一个元素在 URL 参数更改时被删除。 一个元素应该显示,另一个应该消失。 我的尝试是使用classList.add()
和classList.remove()
更改 class 。 应该工作的代码:
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");//doesn't seem to work
questionConfirm.classList.add ("hidden");
//triger function
signupConfirmCode()
}
else {
console.log ("hello")
}
在此处查看问题: https://cheerful-sable-4fff28.netlify.app/sucuss.html?page-type=signup
所有代码:HTML/JS
<!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">
<title>Succes | The Coders Club</title>
<link rel="icon" href="img_2.jpg">
<link rel="stylesheet" href="Styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="info_styles.css">
</head>
<body>
<div class="nav-bar">
<nav>
<a href="index.html"><img src="img_2.jpg" class="nav-img"></a>
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
</div>
<div class="welcome" id="question-confirm">
<div class="success" style="height: 50%; position:absolute; bottom: 200px;">
<h1>Your Question is in!</h1>
<p>For your reference, this is what you wrote:</p>
<div id="wrote"></div>
<h2>While you wait why not?</h2>
<button class="standard-button" style="width: 250px; height: 50px;">Check out our classes</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Read the about us page</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Head to our homepage</button><br><br>
</div>
<div class="signup hidden welcome" id="signup-confirm">
<div class="success">
<h1>Success! Your child(ren) enrolled!</h1>
<p>A conformation will be sent to your email address. For your refernce below are the detials you entered into the signup form. If you need to change <strong>any</strong> of these details please contact me.</p>
<div class="signup-infomation">
<h2>Parent Name</h2>
<li id="parent-name-confirm">Error no parent name</li>
<h2>Student Name(s)</h2>
<li id="student-names">Error no student(s) name</li>
<h2>Parent Email Address</h2>
<li id="email-confirm">Error no parent email address found</li>
<h2>Parent Phone Number</h2>
<li id="parent-phone">Error no parent name</li><br><br>
<p>This info is very important. It may be a good idea to bookmark or</p>
<button class="standard-button" onclick="window.print();">Print this info</button><br><br>
</div>
<h3>Please remeber to bring <span id="confirm-price">$39</span> cash to pay Ethan.</h3>
</div>
</div>
<script>
var signupConfirm = document.getElementById ("signup-confirm");
var questionConfirm = document.getElementById ("question-confirm");
console.log (signupConfirm)
const urlParams = new URLSearchParams(window.location.search);
var pageType = urlParams.get("page-type");
var signupConfirmCode = function () {
var parentNameConfirm = document.getElementById ("parent-name-confirm");
parentNameConfirm.textContent = localStorage.getItem("parent_name");
var studentNamesConfirm = document.getElementById ("student-names");
studentNamesConfirm.textContent = localStorage.getItem("child_names");
var parentEmailConfirm = document.getElementById ("email-confirm");
parentEmailConfirm.textContent = localStorage.getItem("email_confirm");
var parentPhoneConfirm = document.getElementById ("parent-phone");
parentPhoneConfirm.textContent = localStorage.getItem("parent_phone");
};
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");
questionConfirm.classList.add ("hidden")
signupConfirmCode()
}
else {
console.log ("hello")
}
</script>
<script>
var wrote = document.getElementById ("wrote");
wrote.innerHTML = sessionStorage.getItem ("Tiny-Data")
</script>
</body>
</html>
CSS
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
.welcome {
text-align: center;
background-image: url("img_1.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 95vh;
color: white;
position: absolute;
top: 100px;
min-width: 100%;
padding: 0 auto;
}
.welcome-txt {
position: absolute;
top: 40%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
float: right;
padding-right: 50px;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p, ul, ol, li, select {
font-family: 'Poppins', sans-serif;
}
footer {
position: absolute;
top: 3000px;
width: 100%;
}
.footer-list {
list-style: none;
}
.footer-secetion {
position: absolute;
bottom: 200px;
text-align: center;
}
.content {
position: absolute;
top: 1200px;
text-align: center;
margin-left: 30%;
}
input {
height: 30px;
width: 300px;
}
::placeholder {
text-align: center;
font-family: 'Poppins', sans-serif;
}
textarea {
resize: none;
width: 700px;
height: 400px;
}
.standard-button {
background-color: rgb(16, 92, 116);
color: white;
border: none;
border-radius: 5px;
height: 30px;
width: 150px;
font-size: medium;
cursor: pointer;
transition: all 0.5s ease-out;
}
.standard-button:hover {
width: 175px;
height: 40px;
}
.hidden {
display: none;
}
.info-content {
position: absolute;
top: 1075px;
text-align: center;
background-image: url("img_5.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.info-content-blocks {
background-color: rgba(204, 204, 204, 0.8);
margin: 30px;
padding: 30px;
}
.diveder {
width: 100%;
height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}
.success {
background-color: rgba(255, 255, 255, 0.808);
margin-left: 1.75%;
padding: 30px;
height: 80%;
position: absolute;
bottom: 100px;
color: black;
width: 93%;
}
.signup-infomation {
border: 1px solid;
width: 45%;
position: relative;
left: 25%;
overflow-y: hidden;
overflow-x: scroll;
}
select {
width: 150px;
height: 35px;
font-size: medium;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 85%;
top: 30px;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color:rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left:auto;
margin-right:auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
.fade-out {
opacity: 0;
transition: all 3000ms ease-in-out;
}
.fade-in {
opacity: 1;
transition: all 3000ms ease-in-out;
}
.arrow
{
position: relative;
bottom: -2rem;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
/**
* Dark Arrow Down
*/
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
background-size: contain;
}
.bounce {
animation: bounce 2s infinite;
}
.arrow-background {
background-color: rgba(204, 204, 204, 0.8);
min-width: 100px;
padding: 25px;
border-radius: 100px;
margin: 0;
position: absolute;
top: 80%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@media print {
.nav-bar {
display: none;
}
.standard-button {
display: none;
}
p {
display: none;
}
}
@media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.