admin管理员组

文章数量:1335371

I have written some js to get an element by class name but the element I am targeting has two classes.

<div class="module gh">

This is the script that I am using to try and target this class.

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

For some reason I get the error "Uncaught TypeError: Cannot set property '-webkit-animation' of undefined" Which is suggesting that the class cannot be found. What do I need to do here?

Here is the full code if anyone cares to help me clean it up and share why they would make changes I would GREATLY appreciate it. Just getting into JS btw...

jQuery(document).ready(function(){jQuery('.carousel').each(function(index, element){jQuery(this)[index].slide = null;});jQuery('.carousel').carousel('cycle');});



var yPosition;

window.onload = function(){

yPosition = document.getElementById("sp-menu-wrapper").offsetTop;
}

window.onscroll = function(){

var stickyMenu = document.getElementById("sp-menu-wrapper");
var userOneSlideIn = document.getElementById("sp-user1");
var userTwoSlideIn = document.getElementById("sp-user2");
var userThreeSlideIn = document.getElementById("sp-user3");
var userFourSlideIn = document.getElementById("sp-user4");
var gh = document.getElementsByClassName("gh");

if( document.getElementById("sp-user1") != null && document.getElementById("sp-user2") != null && document.getElementById("sp-user3") != null && document.getElementById("sp-user4") != null && yPosition <= (window.pageYOffset + -100) ){ // pare original y position of element to y position of page

    userOneSlideIn.style["-webkit-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-moz-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-os-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-ms-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style.marginLeft = "0px"

    userTwoSlideIn.style["-webkit-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-moz-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-os-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-ms-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style.marginLeft = "30px"

    userThreeSlideIn.style["-webkit-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-moz-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-os-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-ms-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style.marginLeft = "30px"

    userFourSlideIn.style["-webkit-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-moz-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-os-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-ms-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style.marginLeft = "30px"

}

if( document.getElementById("sp-menu-wrapper") != null && yPosition <= window.pageYOffset ){ 

    stickyMenu.style.position = "fixed";
    stickyMenu.style.top = "0px";
    stickyMenu.style.boxShadow= "rgb(112, 173, 139) 5px 5px 1200px";
    stickyMenu.style.width= "100%";
    stickyMenu.style.zIndex= "1";

}     

else{          

    stickyMenu.style.position = "inherit";
    stickyMenu.style.top = "";    
}                       

if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){

    gh.style["-webkit-animation"] = "ffr 2s ease forwards";
    gh.style["-moz-animation"] = "ffr 2s ease forwards";
    gh.style["-os-animation"] = "ffr 2s ease forwards";
    gh.style["-ms-animation"] = "ffr 2s ease forwards";
    gh.style["animation"] = "ffr 2s ease forwards";
    gh.style.display = "block";

}               
}

NOTE:The question was answered and here is my modified code for anyone who has the issue.

jQuery(document).ready(function(){//when document is ready - fire

var yPosition;//yPosition variable.

yPosition = document.getElementById("sp-menu-wrapper").offsetTop;// save original y position of element before scrolling.

window.onscroll = function(){// on scroll this will fire.

//declare all variables
var stickyMenu = document.getElementById("sp-menu-wrapper");
var userOneSlideIn = document.getElementById("sp-user1");
var userTwoSlideIn = document.getElementById("sp-user2");
var userThreeSlideIn = document.getElementById("sp-user3");
var userFourSlideIn = document.getElementById("sp-user4");
var gh = document.querySelectorAll(".module.gh");

    //below - if element exists and scrlling is at this point - fire
    if( document.getElementById("sp-user1") != null && document.getElementById("sp-user2") != null && document.getElementById("sp-user3") != null && document.getElementById("sp-user4") != null && yPosition <= (window.pageYOffset + -100) ){ // pare original y position of element to y position of page

        userOneSlideIn.style["-webkit-animation"] = "flyin1 1s ease forwards";//user1 style
        userOneSlideIn.style["-moz-animation"] = "flyin1 1s ease forwards";
        userOneSlideIn.style["-os-animation"] = "flyin1 1s ease forwards";
        userOneSlideIn.style["-ms-animation"] = "flyin1 1s ease forwards";
        userOneSlideIn.style["animation"] = "flyin1 1s ease forwards";
        userOneSlideIn.style.marginLeft = "0px"

        userTwoSlideIn.style["-webkit-animation"] = "flyin2 1s ease forwards";//user2 style
        userTwoSlideIn.style["-moz-animation"] = "flyin2 1s ease forwards";
        userTwoSlideIn.style["-os-animation"] = "flyin2 1s ease forwards";
        userTwoSlideIn.style["-ms-animation"] = "flyin2 1s ease forwards";
        userTwoSlideIn.style["animation"] = "flyin2 1s ease forwards";
        userTwoSlideIn.style.marginLeft = "30px"

        userThreeSlideIn.style["-webkit-animation"] = "flyin3 1s ease forwards";//user3 style
        userThreeSlideIn.style["-moz-animation"] = "flyin3 1s ease forwards";
        userThreeSlideIn.style["-os-animation"] = "flyin3 1s ease forwards";
        userThreeSlideIn.style["-ms-animation"] = "flyin3 1s ease forwards";
        userThreeSlideIn.style["animation"] = "flyin3 1s ease forwards";
        userThreeSlideIn.style.marginLeft = "30px"

        userFourSlideIn.style["-webkit-animation"] = "flyin4 1s ease forwards";//user4 style
        userFourSlideIn.style["-moz-animation"] = "flyin4 1s ease forwards";
        userFourSlideIn.style["-os-animation"] = "flyin4 1s ease forwards";
        userFourSlideIn.style["-ms-animation"] = "flyin4 1s ease forwards";
        userFourSlideIn.style["animation"] = "flyin4 1s ease forwards";
        userFourSlideIn.style.marginLeft = "30px"

    }

    //below - if element exists and scrolling is at this point - fire
    if( document.getElementById("sp-menu-wrapper") != null && yPosition <= window.pageYOffset ){

        //sticky menu style
        stickyMenu.style.position = "fixed";
        stickyMenu.style.top = "0px";
        stickyMenu.style.boxShadow= "rgb(112, 173, 139) 5px 5px 1200px";
        stickyMenu.style.width= "100%";
        stickyMenu.style.zIndex= "1";

    }

    else{

        //always show
        stickyMenu.style.position = "inherit";
        stickyMenu.style.top = "";
    }

    //below - if element exists and scrolling is at this point - fire
    if( document.querySelectorAll(".module.gh") != null && yPosition <= (window.pageYOffset + -400) ){

        //loop through array
        for(var g=0; g<gh.length; g++) {
            gh[g].style["-webkit-animation"] = "ffr 2s ease forwards";//class="module gh"
            gh[g].style["-moz-animation"] = "ffr 2s ease forwards";
            gh[g].style["-os-animation"] = "ffr 2s ease forwards";
            gh[g].style["-ms-animation"] = "ffr 2s ease forwards";
            gh[g].style["animation"] = "ffr 2s ease forwards";
            gh[g].style.display = "block";

        }

    }

}

//fire carousel onload
jQuery('.carousel').each(function(index, element){

    jQuery(this)[index].slide = null;

});

jQuery('.carousel').carousel('cycle');

});

I have written some js to get an element by class name but the element I am targeting has two classes.

<div class="module gh">

This is the script that I am using to try and target this class.

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

For some reason I get the error "Uncaught TypeError: Cannot set property '-webkit-animation' of undefined" Which is suggesting that the class cannot be found. What do I need to do here?

Here is the full code if anyone cares to help me clean it up and share why they would make changes I would GREATLY appreciate it. Just getting into JS btw...

jQuery(document).ready(function(){jQuery('.carousel').each(function(index, element){jQuery(this)[index].slide = null;});jQuery('.carousel').carousel('cycle');});



var yPosition;

window.onload = function(){

yPosition = document.getElementById("sp-menu-wrapper").offsetTop;
}

window.onscroll = function(){

var stickyMenu = document.getElementById("sp-menu-wrapper");
var userOneSlideIn = document.getElementById("sp-user1");
var userTwoSlideIn = document.getElementById("sp-user2");
var userThreeSlideIn = document.getElementById("sp-user3");
var userFourSlideIn = document.getElementById("sp-user4");
var gh = document.getElementsByClassName("gh");

if( document.getElementById("sp-user1") != null && document.getElementById("sp-user2") != null && document.getElementById("sp-user3") != null && document.getElementById("sp-user4") != null && yPosition <= (window.pageYOffset + -100) ){ // pare original y position of element to y position of page

    userOneSlideIn.style["-webkit-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-moz-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-os-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-ms-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style.marginLeft = "0px"

    userTwoSlideIn.style["-webkit-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-moz-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-os-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-ms-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style.marginLeft = "30px"

    userThreeSlideIn.style["-webkit-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-moz-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-os-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-ms-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style.marginLeft = "30px"

    userFourSlideIn.style["-webkit-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-moz-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-os-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-ms-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style.marginLeft = "30px"

}

if( document.getElementById("sp-menu-wrapper") != null && yPosition <= window.pageYOffset ){ 

    stickyMenu.style.position = "fixed";
    stickyMenu.style.top = "0px";
    stickyMenu.style.boxShadow= "rgb(112, 173, 139) 5px 5px 1200px";
    stickyMenu.style.width= "100%";
    stickyMenu.style.zIndex= "1";

}     

else{          

    stickyMenu.style.position = "inherit";
    stickyMenu.style.top = "";    
}                       

if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){

    gh.style["-webkit-animation"] = "ffr 2s ease forwards";
    gh.style["-moz-animation"] = "ffr 2s ease forwards";
    gh.style["-os-animation"] = "ffr 2s ease forwards";
    gh.style["-ms-animation"] = "ffr 2s ease forwards";
    gh.style["animation"] = "ffr 2s ease forwards";
    gh.style.display = "block";

}               
}

NOTE:The question was answered and here is my modified code for anyone who has the issue.

jQuery(document).ready(function(){//when document is ready - fire

var yPosition;//yPosition variable.

yPosition = document.getElementById("sp-menu-wrapper").offsetTop;// save original y position of element before scrolling.

window.onscroll = function(){// on scroll this will fire.

//declare all variables
var stickyMenu = document.getElementById("sp-menu-wrapper");
var userOneSlideIn = document.getElementById("sp-user1");
var userTwoSlideIn = document.getElementById("sp-user2");
var userThreeSlideIn = document.getElementById("sp-user3");
var userFourSlideIn = document.getElementById("sp-user4");
var gh = document.querySelectorAll(".module.gh");

    //below - if element exists and scrlling is at this point - fire
    if( document.getElementById("sp-user1") != null && document.getElementById("sp-user2") != null && document.getElementById("sp-user3") != null && document.getElementById("sp-user4") != null && yPosition <= (window.pageYOffset + -100) ){ // pare original y position of element to y position of page

        userOneSlideIn.style["-webkit-animation"] = "flyin1 1s ease forwards";//user1 style
        userOneSlideIn.style["-moz-animation"] = "flyin1 1s ease forwards";
        userOneSlideIn.style["-os-animation"] = "flyin1 1s ease forwards";
        userOneSlideIn.style["-ms-animation"] = "flyin1 1s ease forwards";
        userOneSlideIn.style["animation"] = "flyin1 1s ease forwards";
        userOneSlideIn.style.marginLeft = "0px"

        userTwoSlideIn.style["-webkit-animation"] = "flyin2 1s ease forwards";//user2 style
        userTwoSlideIn.style["-moz-animation"] = "flyin2 1s ease forwards";
        userTwoSlideIn.style["-os-animation"] = "flyin2 1s ease forwards";
        userTwoSlideIn.style["-ms-animation"] = "flyin2 1s ease forwards";
        userTwoSlideIn.style["animation"] = "flyin2 1s ease forwards";
        userTwoSlideIn.style.marginLeft = "30px"

        userThreeSlideIn.style["-webkit-animation"] = "flyin3 1s ease forwards";//user3 style
        userThreeSlideIn.style["-moz-animation"] = "flyin3 1s ease forwards";
        userThreeSlideIn.style["-os-animation"] = "flyin3 1s ease forwards";
        userThreeSlideIn.style["-ms-animation"] = "flyin3 1s ease forwards";
        userThreeSlideIn.style["animation"] = "flyin3 1s ease forwards";
        userThreeSlideIn.style.marginLeft = "30px"

        userFourSlideIn.style["-webkit-animation"] = "flyin4 1s ease forwards";//user4 style
        userFourSlideIn.style["-moz-animation"] = "flyin4 1s ease forwards";
        userFourSlideIn.style["-os-animation"] = "flyin4 1s ease forwards";
        userFourSlideIn.style["-ms-animation"] = "flyin4 1s ease forwards";
        userFourSlideIn.style["animation"] = "flyin4 1s ease forwards";
        userFourSlideIn.style.marginLeft = "30px"

    }

    //below - if element exists and scrolling is at this point - fire
    if( document.getElementById("sp-menu-wrapper") != null && yPosition <= window.pageYOffset ){

        //sticky menu style
        stickyMenu.style.position = "fixed";
        stickyMenu.style.top = "0px";
        stickyMenu.style.boxShadow= "rgb(112, 173, 139) 5px 5px 1200px";
        stickyMenu.style.width= "100%";
        stickyMenu.style.zIndex= "1";

    }

    else{

        //always show
        stickyMenu.style.position = "inherit";
        stickyMenu.style.top = "";
    }

    //below - if element exists and scrolling is at this point - fire
    if( document.querySelectorAll(".module.gh") != null && yPosition <= (window.pageYOffset + -400) ){

        //loop through array
        for(var g=0; g<gh.length; g++) {
            gh[g].style["-webkit-animation"] = "ffr 2s ease forwards";//class="module gh"
            gh[g].style["-moz-animation"] = "ffr 2s ease forwards";
            gh[g].style["-os-animation"] = "ffr 2s ease forwards";
            gh[g].style["-ms-animation"] = "ffr 2s ease forwards";
            gh[g].style["animation"] = "ffr 2s ease forwards";
            gh[g].style.display = "block";

        }

    }

}

//fire carousel onload
jQuery('.carousel').each(function(index, element){

    jQuery(this)[index].slide = null;

});

jQuery('.carousel').carousel('cycle');

});
  • javascript
  • jquery
  • class
Share Improve this question edited Sep 17, 2014 at 9:21 thaGH05T asked Sep 17, 2014 at 7:37 thaGH05TthaGH05T 1201 silver badge9 bronze badges 8
  • 4 If jQuery in the code is the jQuery, why to use native DOM queries? – Teemu Commented Sep 17, 2014 at 7:39
  • I am sorry, I am not sure what you mean. Can you please elaborate? – thaGH05T Commented Sep 17, 2014 at 7:45
  • @freshbm Please visit My Site – thaGH05T Commented Sep 17, 2014 at 7:48
  • Why do you looking for getting elements by multiple class names ? – Voonic Commented Sep 17, 2014 at 7:49
  • getElementsByClassName returns array like result, so gh.style["-webkit-animation"] - should be like gh[0].style... – Dart Commented Sep 17, 2014 at 7:50
 |  Show 3 more ments

6 Answers 6

Reset to default 2

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/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";
   }    
}

According to W3C HTML5 Specification, your method should work. Moreover, remember that using document.getElementsByClassName() with an unknown classname return an empty array so it's never null (see your last if).

The ment of Teemu is true concerning JQuery but given that you're new in JS, that's no big deal.

However, i see that your JS is executed as soon as possible when the web page is loading, so if your JS try to interfere with HTML elements that are not yet created, you get an error.

The first line of code that you see is executed when the DOM is ready, when all elements are created; the least that i could advice you is to put your window.onscroll inside the first depth of the JQuery code and the window.onload content before the window.onscroll in the JQuery.

I give you an advice:

jQuery(document).ready(function(){
  //You can create your yPosition variable here because it will be used only inside this function.

  //Then you can put the window.onload content here (only inside the function, since JQuery(document).ready() is doing the same thing as window.onload)

  // And here you can write your window.onscroll


  jQuery('.carousel').each(function(index, element){
    jQuery(this)[index].slide = null;
  });
  jQuery('.carousel').carousel('cycle');
});


var yPosition;

window.onload = function(){

yPosition = document.getElementById("sp-menu-wrapper").offsetTop;
}

window.onscroll = function(){

var stickyMenu = document.getElementById("sp-menu-wrapper");
var userOneSlideIn = document.getElementById("sp-user1");
var userTwoSlideIn = document.getElementById("sp-user2");
var userThreeSlideIn = document.getElementById("sp-user3");
var userFourSlideIn = document.getElementById("sp-user4");
var gh = document.getElementsByClassName("gh");

if( document.getElementById("sp-user1") != null && document.getElementById("sp-user2") != null && document.getElementById("sp-user3") != null && document.getElementById("sp-user4") != null && yPosition <= (window.pageYOffset + -100) ){ // pare original y position of element to y position of page

    userOneSlideIn.style["-webkit-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-moz-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-os-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["-ms-animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style["animation"] = "flyin1 1s ease forwards";
    userOneSlideIn.style.marginLeft = "0px"

    userTwoSlideIn.style["-webkit-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-moz-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-os-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["-ms-animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style["animation"] = "flyin2 1s ease forwards";
    userTwoSlideIn.style.marginLeft = "30px"

    userThreeSlideIn.style["-webkit-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-moz-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-os-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["-ms-animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style["animation"] = "flyin3 1s ease forwards";
    userThreeSlideIn.style.marginLeft = "30px"

    userFourSlideIn.style["-webkit-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-moz-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-os-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["-ms-animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style["animation"] = "flyin4 1s ease forwards";
    userFourSlideIn.style.marginLeft = "30px"

}

if( document.getElementById("sp-menu-wrapper") != null && yPosition <= window.pageYOffset ){ 

    stickyMenu.style.position = "fixed";
    stickyMenu.style.top = "0px";
    stickyMenu.style.boxShadow= "rgb(112, 173, 139) 5px 5px 1200px";
    stickyMenu.style.width= "100%";
    stickyMenu.style.zIndex= "1";

}     

else{          

    stickyMenu.style.position = "inherit";
    stickyMenu.style.top = "";    
}                       

if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){

    gh.style["-webkit-animation"] = "ffr 2s ease forwards";
    gh.style["-moz-animation"] = "ffr 2s ease forwards";
    gh.style["-os-animation"] = "ffr 2s ease forwards";
    gh.style["-ms-animation"] = "ffr 2s ease forwards";
    gh.style["animation"] = "ffr 2s ease forwards";
    gh.style.display = "block";

}               
}

Maybe I'm repeating myself but don't forget that document.getElementsByClassName() return an array of HTMLElement, not only an HTMLElement (mind the s after Element in getElementsByClassName())

I hope that i helped you.

getElementsByClassName uses CSS class names to identify elements in the document, meaning it will look into each element’s class attribute. An element can have one or more CSS classes, like in the case of our example document where we have a div with 2 classes module and gh. Using the getElementsByClassName selector you can select the item using either of the 2 CSS classes or even both. 

var el = document.getElementsByClassName('module gh');
console.log(el)

here is working version

use querySelectorAll instead of getElementsByClassName().

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

This will return you the array of elements. You need to access it using index eg., gh[0] will give you first element. Check the JSFIDDLE.

check querySelectorAll

Try and Modify this :

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

if( document.getElementsByClassName("gh") != null && yPosition <= (window.pageYOffset + -400) ){
 for(var k=0; k < gh.length; k++){

gh[k].style["-webkit-animation"] = "ffr 2s ease forwards";
gh[k].style["-moz-animation"] = "ffr 2s ease forwards";
gh[k].style["-os-animation"] = "ffr 2s ease forwards";
gh[k].style["-ms-animation"] = "ffr 2s ease forwards";
gh[k].style["animation"] = "ffr 2s ease forwards";
gh[k].style.display = "block";
}
}

Ok, the answer to this particular question was answered best by @freshbm and @Fraizan. They told me to use a for loop to go through each iteration of the array that was created by document.querySelectorAll this is what I did to modify the code.

if( document.querySelectorAll("module gh") != null && yPosition <= (window.pageYOffset + -400) ){ // pare original y position of element to y position of page 

  for(var g=0; g<gh.length; g++) {
  gh[g].style["-webkit-animation"] = "ffr 2s ease forwards";
  gh[g].style["-moz-animation"] = "ffr 2s ease forwards";
  gh[g].style["-os-animation"] = "ffr 2s ease forwards";
  gh[g].style["-ms-animation"] = "ffr 2s ease forwards";
  gh[g].style["animation"] = "ffr 2s ease forwards";
  gh[g].style.display = "block";
    }
}

This worked great to resolve my issue.

本文标签：

版权声明：本文标题：javascript - How to use &quot;getElementsByClassName&quot; to get multiple classes from same element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742343811a2457118.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。