className.remove Not Working. Trying to remove active when you click on button

Question

I am trying to make a remove active function but it wont register and I got an error on my console:

Uncaught TypeError: Cannot read properties of undefined (reading 'remove')

Is there any other way i can add a remove function apart from document.queryselector or document.queryselectorAll as i have tried them as well and still doesn't work. I have added the all the code below.

JavaScript

var container = document.getElementById("btn-tab");
        var current = container.getElementsByClassName("active");
        var press = document.getElementById(this.btn); 
        current.className.remove("active");
        press.className += " active";

HTML

<div id="btn-tab" class="tabs">
                        <button id="tabnews" class="tablinks active" onclick="openFeed(this)">LATEST NEWS</button>
                        <button id="tabevents" class="tablinks" onclick="openFeed(this)">EVENTS</button>
                        <button id="tabgroup" class="tablinks" onclick="openFeed(this)">GROUP</button>
                    </div>
<div id="tabs-feed">
                test123
            </div>

Theme Functions

function js_swappost() {
    //swap_post_type is a local name for the ajax call and is onlyused in her
    wp_enqueue_script ("swap_post_type", get_stylesheet_directory_uri() . "/assets/js/ajax.js", array('jquery')) ; 
    //ajax_var is declaring a variable that is available in the client script for accessing data about the Ajax handler
    //nonce is a security featur to prevent injection of Ajax calls
    wp_localize_script('swap_post_type', 'ajax_var', array('ajaxurl' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('swapposttype'))) ;
} 
add_action("wp_enqueue_scripts", "js_swappost") ;

//This is the function to be called when the  Ajax call is made
function swap_post_ajax() {
    //Get the post data type to be shown, defaults to Latest News
    $type = (isset($_POST["postType"])) ? $_POST["postType"] : 'latestNews' ;
    //Get the nonce security code, default to 0
    $nonce =(isset($_POST["nonce"])) ? $_POST["nonce"] : 0 ;
    
    //Check that the security code is correct
    if (wp_verify_nonce($nonce, 'swapposttype')) {
        if ($_POST == "latestNews"){
//          latestnewsFeed() ;
            echo '<p>test</p>';
        }
        
        else{
            if ($_POST == "events")
//              eventsFeed();
            echo '<p>test1</p>';
        
        else {
//          groupFeed();
            echo '<p>Why is this not working?</p>';
            }
        }
    }
    else {
        echo 'Security Alert' ;
    }
    wp_die() ; //Needed to stop WordPress processing normally
}
//This is the code that actually registers the Ajax call wp_ajax is need with the element of 'swap_post_ajax' used to map to the function declared above
add_action('wp_ajax_nopriv_swap_post_ajax', 'swap_post_ajax') ; //Register the event for logged out users
add_action('wp_ajax_swap_post_ajax', 'swap_post_ajax') ; //Register the event for logged in users

CSS

button#tabnews {
    position: relative;
    bottom: 130px;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: flex-start;
    font-family: highvoltage-rough;
    background: #17CBC5;
    width: 50%;
    padding: 20px;
    color: white;
    border-radius: 0px;
    margin: 5px;
    font-style: normal;
    font-weight: 400;
}
    button#tabevents {
    position: relative;
    bottom: 130px;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: flex-start;
    font-family: highvoltage-rough;
    background: #17CBC5;
    width: 50%;
    padding: 20px;
    color: white;
    border-radius: 0px;
    margin: 5px;
    font-style: normal;
    font-weight: 400;
}
    
    button#tabgroup {
    position: relative;
    bottom: 130px;
    font-size: 40px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: flex-start;
    font-family: highvoltage-rough;
    background: #17CBC5;
    width: 50%;
    padding: 20px;
    color: white;
    border-radius: 0px;
    margin: 5px;
    font-style: normal;
    font-weight: 400;
}
    
    

@media screen and (max-width: 768px) {
.tablinks {
    display: flex;
    justify-content: space-between;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 20px;
    max-width: 50%;
    text-align: left;
    height: 70px;
}
}

    .active{
        color: blue;
    }
    
.tablinks:hover {
  background-color: #17cbc5;
  color: white;
  opacity: 1;
}

.tablinks .active {
  background-color: #17cbc5;
}
    
.tablinks{
    text-align: center;
    position: relative;
    margin-top: 0;
    margin-bottom: -135px;
    top: -127px;
}

@media (max-width: 959px) {
    .tablinks {
    text-align: center;
    position: relative;
    margin-top: 0;
    margin-bottom: -160px;
    top: -158px;
}
}

@media (max-width: 650px) {
.tablinks {
    text-align: center;
    position: relative;
    margin-top: 0;
    margin-bottom: -170px;
    top: -257px;
}
}

@media (max-width: 425px) {
.tablinks {
    text-align: center;
    position: relative;
    margin-top: 0;
    margin-bottom: -74px;
    top: -111px;
}
}

@media (max-width: 375px) {
    .tablinks {
    text-align: center;
    position: relative;
    margin-top: 0;
    margin-bottom: -88px;
    top: -113px;
}
}

@media (max-width: 366px) {
    .tablinks {
    text-align: center;
    position: relative;
    margin-top: 0;
    margin-bottom: -151px;
    top: -166px;
}
}

`className` is the getter/setter to set the content of an element's class attribute in string form. What you are looking for, is https://developer.mozilla.org/en-US/docs/Web/API/Element/classList — CBroe, Sep 09 '21 at 10:54
`className` is a string, use `current.classList.remove` instead. — Teemu, Sep 09 '21 at 10:54
You're using `getElementsByClassName` – it will return a list of elements, not a single element. — AKX, Sep 09 '21 at 10:56
Does this answer your question? [Difference between document.getElementById and document.getElementsByClassName](https://stackoverflow.com/questions/31974582/difference-between-document-getelementbyid-and-document-getelementsbyclassname) — freedomn-m, Sep 09 '21 at 11:11
Tagged [tag:jquery] so use `$(".active").removeClass("active");$(this).addClass("active")` — freedomn-m, Sep 09 '21 at 11:12
Off topic: be careful with the term "nonce" - it can mean [child offender](https://www.collinsdictionary.com/dictionary/english/nonce) - so brings a whole new meaning to "verify_nonce". — freedomn-m, Sep 09 '21 at 11:18
@freedomn-m "[nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)" is an official name of the attribute, limiting its use is a bit moot. — Teemu, Sep 10 '21 at 07:20

score 0 · Answer 1 · answered Oct 14 '21 at 00:36

Your problem is that you are trying to put 'getElementsByClassName' onto another element. This will not work. You can select all children of the container which have that class by doing:

var current = document.querySelectorAll('#btntab > .active');

So, your final code would look like:

var container = document.getElementById('btn-tab');
var current = document.querySelectorAll('#btntab > .active');
var press = document.getElementById('this.btn');
current.className.remove('active');
press.classList.add('active');

className.remove Not Working. Trying to remove active when you click on button

1 Answers1