stackoom
  简体   繁体   中英

classList.add() is not working | Vanilla JavaScript

 原文  2022-09-25 17:58:53  6   1    javascript/ html/ css

Question

My webpage has an element that gets removed when the URL parameters change. 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() . 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

All Code: 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;
        }
 }

1 answers

solution1
 1  2022-09-25 18:18:37

Your problem since to be the HTML, your #question-confirm seems to have a missing closing tag.
You need to add the missing </div> .
This is what makes #signup-confirm to be inside #question-confirm . 在此处输入图像描述

在此处输入图像描述

暂无
暂无

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 classList.add is not working classList.add() is not working in JavaScript vanilla js - classList.add not working, but className does work? classList.add() not working in a function? jQuery addClass working but javascript classList.add not working Function parameters not working with .classList.add Js .classList.add() is not working properly CSS transition not working with classList.add The element modifiers classList.add and classList.remove not working as expected How do i add a class to style my javascript in css classlist.add not working
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM