My jquery from external .js is not working?

my code is

    <html>
    <head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="phc.js"></script>
    <style>
    .effect
    {
    color:red;
    }
    </style>
    </head>
    <body>
    <button class="click-ctrl">jjasdnfjknfjdndfjndsnnakj</button>
    </body>
    </html>

my jquery

    $(document).ready(function(){
        $(".click").click(function(){
            $(this).addClass(".effect");
        });
    });

Hi,

First mistake is you are looking for an element with a class called .click.

You don’t have one :slight_smile:

You have an element with a class of .click-ctrl which I guess is the one you meant.

The second error is that you added a dot before the classname in the addClass function. There is no dot required there because as you are adding a class jquery assumes it is a class.

Here is the revised code.

$(document).ready(function(){
    $(".click-ctrl").click(function(){
        $(this).addClass("effect");
    });
})
1 Like

thaks , that helped me.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.