Getelementsbyclassname() with Two Classes

getElementsByClassName() with two classes

You can't do it with getElementsByClassName() method instead use querySelectorAll() method with comma separated class selectors.

document.querySelectorAll('.a,.b')

document.getElementsByClassName for multiple classes?

Someone put an answer here but now it's gone, wanted to thank them.

This worked for me:

[...document.querySelectorAll('.apple,.bottomapple')].map(x => x.innerHTML = '');

Thanks everyone!

Use getElementsByClassName for selecting 2 classes, with one being the variable of the function

getElementsByClassName accepts a single argument, which is a space-delimited list of classes that each element in the result must have. So:

var list = document.getElementsByClassName(X + " class2");
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^

Live Example:

function myfunction(X) {
 var list = document.getElementsByClassName(X + " class2");
 var listAll = document.getElementsByClassName("All");
 
     for(var t=0;t<listAll.length;t++)
    listAll[t].style.display="none";
    
     for(var y=0;y<list.length;y++)
    list[y].style.display="block";
 
}

<button onclick="myfunction('class1')">Click to select only class1 X 2</button>
<button class="All class1">Class: 1</button>
<button class="All class1 class2">Class: 1 X 2</button>
<button class="All class2">Class: 2</button>

Change multiple classes with getElementsByClassName?

Instead of document.getElementsByClassName use document.querySelectorAll and pass in the CSS selector (not just the classnames):

var berninis = document.querySelectorAll('.picasso, .matisse');
for(var i = 0; i < berninis.length; i++) {
  berninis[i].style.color="#d1d1d1";
}

document.getElementsByClassName() for Multiple classes not working correctly

getElementsByClassName:

Returns an array-like object of all child elements which have all of the given class names.

That means that when used in an if statement, it will always be "truthy". You need to check the length of the array-like object to see how many elements were returned:

if (document.getElementsByClassName('leaderboard above_header').length > 0){
    //found at least one element with both classes
    console.log("2 classes");
} else if(document.getElementsByClassName('leaderboardad').length > 0){
    //found at least one element with the single class
    console.log("1 class");
}

How to use getElementsByClassName to get multiple classes from same element

You have array result for:

var gh = document.getElementsByClassName("module gh");

because you have multiple divs with class="module gh".

You should write something like this in your code:

for(var i=0; i<gh.length; i++) {
   gh[i].style ...
}

I have some example code here:

http://jsfiddle.net/j1tpkfa5/

or in your case:

if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){
   for(var i=0; i<gh.length; i++) {
      gh[i].style["-webkit-animation"] = "ffr 2s ease forwards";
      gh[i].style["-moz-animation"] = "ffr 2s ease forwards";
      gh[i].style["-os-animation"] = "ffr 2s ease forwards";
      gh[i].style["-ms-animation"] = "ffr 2s ease forwards";
      gh[i].style["animation"] = "ffr 2s ease forwards";
      gh[i].style.display = "block";
   }    
}

Call multiple getElementsByClassName() with JS

This works no matter how many elements are on the page:

function showHideEnglish() {
        var german = document.getElementsByClassName("text__german");
        for (var i = 0; i < german.length; i++) {
            german[i].style.display = "none";
        }
        var english = document.getElementsByClassName("text__english"); 
        for (var i = 0; i < english.length; i++) {
            english[i].style.display = "block";            
        }
     }
    
     function showHideGerman() {
        var german = document.getElementsByClassName("text__german");
        for (var i = 0; i < german.length; i++) {
            german[i].style.display = "block";
        }
        var english = document.getElementsByClassName("text__english"); 
        for (var i = 0; i < english.length; i++) {
            english[i].style.display = "none";            
        }
     }

    <button onclick="showHideEnglish();">English</button>
    <button onclick="showHideGerman();">German</button>

    <div class="text__english" style="display:block;">This text is English</div><br>
    <div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div><br>
    <div class="text__english" style="display:block;">This text is English</div>
    <div class="text__german" style="display:none;">dieser Text ist auf Deutsch</div>

---

Related Topics