CODEWITHSUNDEEP
javascripthtml
m aksem
m aksem

Reputation: 571

one function to fire on same class elements click

I'm trying to make controls for category list with sub-category and sub-sub-category lists.

Here's HTML:

<ul class="selectbox-ul">
    <li>
        <div>Category</div>
        <ul class="selectbox-ul-child">
            <li>
                <div>Subcategory</div>
                <ul class="selectbox-ul-child">
                    <li>
                        <div>Sub-subcategory</div>
                    </li>
                </ul>
                <span id="trigger">icon</span>
            </li>
        </ul>
        <span id="trigger">icon</span>
    </li>
    ....
</ul>

So my shot was to add class for ul.selectbox-ul-child :

var trigger = document.getElementById("trigger");

function subCatStatus() {
    if(this.parentElement.children[1].className != "... expanded") {
        this.parentElement.children[1].className += " expanded"
    } else {
        this.parentElement.children[1].className == "..."
    };
};

trigger.addEventListener("click", subCatStatus);

And it works only for first span#trigger(that shows subcategories), next one (for sub-subcategories) does nothing (I've also tried to use .getElementsByClassName it didn't work for any of triggers) . So i'd like to get some explanation why doesn't this one work. And some advice how to make it work.

Upvotes: 1

Views: 242

Answers (2)

Domenico
Domenico

Reputation: 178

As others have already mentioned, you can't stack multiple elements with the same ID since document.getElementById() is not supposed to return more than one value.

You may try instead to assign the "trigger" class to each of those spans instead of IDs and then try the following code

var triggers = document.getElementsByClassName("trigger");

function subCatStatus() {
    if(this.parentElement.children[1].className != "... expanded") {
        this.parentElement.children[1].className += " expanded"
    } else {
        this.parentElement.children[1].className == "..."
    };
};

for(var i = 0; i < triggers.length; i++) {
    triggers[i].addEventListener("click", subCatStatus);
}

Upvotes: 1

Vijay Mishra
Vijay Mishra

Reputation: 350

javascript getElementById returns only single element so it will only work with your first found element with the ID.

getElementsByClassName returns an array of found elements with the same class, so when adding listener to the event on element you would require to loop through this array and add individually to it.

Upvotes: 1

Related Questions