classList.add() 不工作 | 香草 JavaScript

Question

My webpage has an element that gets removed when the URL parameters change.我的网页中有一个元素在 URL 参数更改时被删除。 One element is supposed to display and the other is supposed to disappear.一个元素应该显示，另一个应该消失。 My attempt was to change the class using classList.add() and classList.remove() .我的尝试是使用classList.add()和classList.remove()更改 class 。 The code that should-have worked:应该工作的代码：

        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")
        }

View the problem here: https://cheerful-sable-4fff28.netlify.app/sucuss.html?page-type=signup在此处查看问题： https://cheerful-sable-4fff28.netlify.app/sucuss.html?page-type=signup

All Code: HTML/JS所有代码：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 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;
        }
 }

Answer 1

Your problem since to be the HTML, your #question-confirm seems to have a missing closing tag.您的问题是 HTML，您的#question-confirm似乎缺少结束标记。
You need to add the missing </div> .您需要添加缺少的</div> 。
This is what makes #signup-confirm to be inside #question-confirm .这就是使#signup-confirm出现在#question-confirm中的原因。

classList.add() 不工作 | 香草 JavaScript

问题描述

1 个解决方案

解决方案1
1 2022-09-25 18:18:37

classList.add() 不工作 | 香草 JavaScript

问题描述

1 个解决方案

解决方案1 1 2022-09-25 18:18:37

解决方案1
1 2022-09-25 18:18:37