classList.add() is not working | Vanilla JavaScript

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;
        }
 }

Do not add spaces on your own where spaces are not allowed. It has to be classList.add() instead of classList.add (). Same for remove` and console.log — tacoshy
– tacoshy, Commented Sep 25, 2022 at 18:11
You may like to put your code through a validator. Amongst other things it has li elements within div elements which is not legal HTML. — A Haworth
– A Haworth, Commented Sep 25, 2022 at 18:19
@tacoshy, I don't see that problem when I use say console.log ('hello') - is it in the spec that there mustn't be spaces there? — A Haworth
– A Haworth, Commented Sep 25, 2022 at 18:43

Danny · Accepted Answer · 2022-09-26 08:53:47Z

1

Your problem seems 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.

edited Sep 26, 2022 at 8:53

answered Sep 25, 2022 at 18:18

Danny

6101 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

classList.add() is not working | Vanilla JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related