CODEWITHSUNDEEP
javascripthtmlcss
Ethan
Ethan

Reputation: 1637

classList.add() is not working | Vanilla JavaScript

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

Upvotes: 0

Views: 1014

Answers (1)

Danny
Danny

Reputation: 590

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. enter image description here

enter image description here

Upvotes: 1

Related Questions