Add/Remove active class JavaScript

Question

There is my solution. There is not working. I don't know why :(

document.addEventListener("DOMContentLoaded", function()
{
    //let headers = document.querySelector(".nav");
    let active = document.querySelectorAll(".nav-el");
    for(let i = 0; i< active.length; i++)
    {
        active[i].addEventListener("click", function()
        {
            let current = document.getElementsByClassName("nav-el-active");
            current[0].classList.remove("nav-el-active");
            this.classList.add("nav-el-active");
        });
    }
})

tom · Accepted Answer · 2019-10-24 09:04:31Z

Use forEach and querySelectorAll. See the restructured example:

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".nav-el").forEach(function(el) {
    el.addEventListener("click", function() {
			removeClasses();
			this.classList.add("nav-el-active");
		});
  });
});

function removeClasses() {
  document.querySelectorAll(".nav-el-active").forEach(function(el) {
    el.classList.remove("nav-el-active");
  });
}

body {
    background: #fff;
    margin: 0;
}
.nav {
    list-style:none;
    padding:0;
    margin: 10px;
    display: flex;
    justify-content: center;
}
.nav-el {
    background: rgba(231,29,54,1);
    box-shadow:0 5px 5px -3px rgba(231,29,54,0.3);
    margin-right:1px;
    flex-grow:1;
    transition: 0.5s background-color;
    display: flex;
    position: relative;
}
.nav-el:first-child {
    border-radius: 5px 0 0 5px;
}
.nav-el:last-child {
    border-radius: 0 5px 5px 0;
}
.nav-link {
    padding:2rem;
    display: block;
    display: flex;
    flex-grow:1;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color:#fff;
    font-weight: bold;
}
.nav-el-active {
    background: #7200da;
    box-shadow:0 5px 15px -3px rgba(114,0,218,0.5);
}
@media (max-width:1000px) {
    .nav {
        flex-wrap: wrap;
    }
    .nav-el {
        width:33.3333%;
        margin-bottom:1px;
    }
}
@media (max-width:400px) {
    .nav {
        flex-wrap: wrap;
    }
    .nav-el {
        width:100%;
        margin-bottom:1px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/style.css">
    <script defer src="js/app.js"></script>
</head>
<body>

    <ul class="nav">
        <li class="nav-el nav-el-active">
            <a href="#" class="nav-link">Strona główna</a>
        </li>
        <li class="nav-el">
            <a href="#" class="nav-link">Galeria</a>
        </li>
        <li class="nav-el">
            <a href="#" class="nav-link">Nowości</a>
        </li>
        <li class="nav-el">
            <a href="#" class="nav-link">Nasze prace</a>
        </li>
        <li class="nav-el">
            <a href="#" class="nav-link">Nasz zespół</a>
        </li>
        <li class="nav-el">
            <a href="#" class="nav-link">Kontakt</a>
        </li>
    </ul>
</body>
</html>

Thanks to yours solution I found error in my code. That was only one line. I changed this line let current = document.getElementsByClassName("nav-el-active"); on let current = document.querySelectorAll(".nav-el-active");

Collectives™ on Stack Overflow

Add/Remove active class JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related