javascript - Cannot read property 'addClass' of undefined - Stack Overflow

admin管理员组

文章数量:1314262

So i am trying to add a class to but it doesnt work

<script>
    var url = document.location.pathname;
    debugger;
    if(url === '/about.php') {
        $('.about').addClass('active');
        //document.getElementsByClassName('about')[0].addClass('active');
        console.log(url);
    }
//important part start
    if(url === '/index.php') {
        $('.homee').addClass('active');
        document.getElementsByClassName('homee')[0].addClass('active');
        console.log(url); 
    } 
//important part end
    if(url === '/sch.php') {
        $('.schedule').addClass('active');
        //document.getElementsByClassName('schedule')[0].addClass('active');
        console.log(url);
    }
    if(url === '/images.php') {
        $('.gallery').addClass('active');
        //document.getElementsByClassName('gallery')[0].addClass('active');
        console.log(url);
    }
    if(url ===  '/videos.php') {
        $('.gallery').addClass('active');
    }
    console.log(url);

    </script>

<ul class="menu" >
    <li class='homee' ><a href="index.php">HOME</a></li>
</ul>

as you can see i tryed 2 methods and $('.homee').addClass('active'); didnt say Cannot read property 'addClass' of undefined but it still didnt add the class

So i am trying to add a class to but it doesnt work

<script>
    var url = document.location.pathname;
    debugger;
    if(url === '/about.php') {
        $('.about').addClass('active');
        //document.getElementsByClassName('about')[0].addClass('active');
        console.log(url);
    }
//important part start
    if(url === '/index.php') {
        $('.homee').addClass('active');
        document.getElementsByClassName('homee')[0].addClass('active');
        console.log(url); 
    } 
//important part end
    if(url === '/sch.php') {
        $('.schedule').addClass('active');
        //document.getElementsByClassName('schedule')[0].addClass('active');
        console.log(url);
    }
    if(url === '/images.php') {
        $('.gallery').addClass('active');
        //document.getElementsByClassName('gallery')[0].addClass('active');
        console.log(url);
    }
    if(url ===  '/videos.php') {
        $('.gallery').addClass('active');
    }
    console.log(url);

    </script>

<ul class="menu" >
    <li class='homee' ><a href="index.php">HOME</a></li>
</ul>

as you can see i tryed 2 methods and $('.homee').addClass('active'); didnt say Cannot read property 'addClass' of undefined but it still didnt add the class

• javascript
• jquery

Share Improve this question Follow asked Apr 14, 2018 at 20:21 Aleksandar LubascikAleksandar Lubascik 4111 gold badge11 silver badge77 bronze badges 3

• Should “homee” be “home”? – Patrick McElhaney Commented Apr 14, 2018 at 20:27
• 1 yes but i already have class and id home for something else so i just added another e – Aleksandar Lubascik Commented Apr 14, 2018 at 20:40
• Okay, just checking. Because the HTML did not have a class named “homee” you would have gotten that error. Anyway, glad you found the solution. I’ve made that same mistake a few times. :) – Patrick McElhaney Commented Apr 14, 2018 at 22:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You're running the script before the HTML has been populated - at the time the parser gets to the $('.homee').addClass('active'); line, the <li class='homee' > hasn't been created yet, since as you can see, the element is below the script.

Wrap your whole script in a function that fires once the document has been parsed:

<script>
  $(function() {
    var url = document.location.pathname;
    debugger;
    if(url === '/about.php') {
      $('.about').addClass('active');
      //document.getElementsByClassName('about')[0].addClass('active');
      console.log(url);
    }
    //important part start
    if(url === '/index.php') {
      $('.homee').addClass('active');
      document.getElementsByClassName('homee')[0].addClass('active');
      console.log(url); 
    } 
    //important part end
    if(url === '/sch.php') {
      $('.schedule').addClass('active');
      //document.getElementsByClassName('schedule')[0].addClass('active');
      console.log(url);
    }
    if(url === '/images.php') {
      $('.gallery').addClass('active');
      //document.getElementsByClassName('gallery')[0].addClass('active');
      console.log(url);
    }
    if(url ===  '/videos.php') {
      $('.gallery').addClass('active');
    }
    console.log(url);
  });
</script>

Even better, put the script in a separate file and give it the defer attribute:

<script src="myscript.js" defer>

You need to wrap your code if you want to use JQuery

(function($) {
    $(document).ready(function(){
       // your code here
    }); 
})(jQuery);

.addClass() is a jQuery method. If you want to add the class using the plain javaScript you can write:

document.getElementsByClassName('homee')[0].classList.add('active')

For documentation see classList

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementsByClassName('homee')[0].classList.add('active')

});

.active {
  background: red;
}

<ul class="menu" >
    <li class='homee' ><a href="index.php">HOME</a></li>
</ul>

本文标签： javascriptCannot read property 39addClass39 of undefinedStack Overflow