Question 280709 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – JavaScript – onClick function to remove and add class not working

I have a sidebarmenu with anchor link. The idea is simple: Once someone clicks on a menuitem that specific item gets the "active" class and the previous "active" menuitem gets that class removed.

Somehow the code doesnt work and I cant figure out why..

Happy to receive some tips and help!

This is the page:
https://www.otto-keller.de/wissenswertes/

function setActive(element){
    var menuitems = document.querySelectorAll(".leftmenu_item.active");
        [].forEach.call(menuitems, function(el) {
                  el.classList.remove("active");
        });
    element.classList.add("active");
}
.active {
color: red;
}
<ul>
    <li class="leftmenu_item active" onclick="setActive(this)">
        <a href="#daunenfedern">Daunen &amp; Federn</a>
    </li>
    <li class="leftmenu_item " onclick="setActive(this)">
        <a href="#inlett">Inlett</a>
    </li>
    <li class="leftmenu_item " onclick="setActive(this)">
        <a href="#allergiker">Allergiker</a>
    </li>
    <li class="leftmenu_item " onclick="setActive(this)">
        <a href="#waschmittel">Waschmittel</a>
    </li>
</ul>
function setActive(element){
   var menuitems = document.querySelectorAll(".leftmenu_item.active");
   [].forEach.call(elems, function(el) {
    el.classList.remove("active");
   });
   element.classList.add("active");
}

I tried to look first for the element that has the active class already to remove it. Then add the "active" class to the element which was clicked on with onclick().

Somehow it doesnt work on the live page – but in the editor..

Tags:

2

Answers


  1. 0

    Change this

    [].forEach.call(elems, function(el) {
    el.classList.remove("active");
});

    To this

    menuitems.forEach((element, index, entireList) => {
    el.classList.remove("active");
});

    Iterate over the NodeList returned by document.querySelectorAll() instead of the [] like you did earlier. See the correct signature for the forEach.

    Login or Signup to reply.
  2. 0

    You can implement this by looping your elements, adding them a click event listener which calls setActive, passing the element to be set to active. Inside setActive, we check whether the current element is already active in which case we do nothing. Otherwise, we find the previously active element and, if it exists, then we remove the active class from it and then we proceed adding the active class to the element that was clicked.

    function setActive(currentElem){
    if (!currentElem.classList.contains("active")) {
        let previousActive = document.querySelector(".leftmenu_item.active");
        if (previousActive) previousActive.classList.remove("active");
        currentElem.classList.add("active");
    }
}


for (let currentElem of document.querySelectorAll(".leftmenu_item")) {
    currentElem.addEventListener("click", function() {
        setActive(this);
    });
}
    .leftmenu_item.active {
    background-color: green;
}

.leftmenu_item {
    width: 100px;
    height: 100px;
    border: 3px solid red;
}
    <div class="leftmenu_item active"></div>
<div class="leftmenu_item"></div>
<div class="leftmenu_item"></div>
<div class="leftmenu_item"></div>
<div class="leftmenu_item"></div>
<div class="leftmenu_item"></div>
<div class="leftmenu_item"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search