CODEWITHSUNDEEP
c#jqueryhtmlasp.net
Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

jquery simple code not working(id is assigned to the button)

This is the sample code that i am learning from w3schools. This time i have given the id too to the button. Please help.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeIn();
                $("#div2").fadeIn("slower");
                $("#div3").fadeIn(3000);
            });
        });
    </script>
    <title></title>
</head>
<body>
    <h2>Try jQuery</h2>
    <br /><button>Click me</button>
    <br /><br />
    <div id="div1" style="width:80px;height:80px;color:green"></div>
    <div id="div2" style="width:80px;height:80px;color:yellow"></div>
    <div id="div3" style="width:80px;height:80px;color:blanchedalmond"></div>
</body>
</html>

Upvotes: 0

Views: 91

Answers (5)

Garima
Garima

Reputation: 69

You want to hide p tag elements on onclick of button.

So firstly, you have to provide id for this button because you are making click function on button.

Try this:

<button id='hide'>Click Me</button>

Upvotes: 0

quid
quid

Reputation: 1034

As others have mentioned your script is looking for something with the ID attribute 'hide' as indicated in your jQuery $('#hide').

There are many different ways to select everything in your dom. Have a look at the jquery documentation. http://api.jquery.com/category/selectors/ The simplicity of selecting dom elements is what makes jQuery so powerful in my opinion.

Select by ID: 

$('#id')

You can select every even row in a table. 

$('table tr:even')

You can select the 14th div element in the dom. 

$('div:eq(14)')

You can select all elements with a given class. 

$('.class')

Here is a JSfiddle with the code in a working fashion.

http://jsfiddle.net/5v94cnrr/

It looks like the button is ID 'hide' and it will hide all P elements on click. Typically you'd use a class called hide and hide all element with class hide on click of the button or some other action.

Upvotes: 0

Md Shawon
Md Shawon

Reputation: 230

Just copy and paste it. It works. Tested.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!--<script type="text/javascript" src="jquery-1.11.2.js"></script>-->
    <script>
        $(document).ready(function () {
            $("#hide").click(function () {
                $("p").hide();
            });
        });
    </script>
    <title></title>
</head>
<body>
    <h2>Try jQuery</h2>
    <p>This will get hide</p>
    <button id="hide">CLick Me</button>
</body>
</html>

Upvotes: 1

user3316122
user3316122

Reputation: 19

You have not set #hide for anything. If you need it on a button, do:

<button id="hide">CLick Me</button>

Upvotes: 0

Joonas Koski
Joonas Koski

Reputation: 269

$("#hide").click(function () ...

this line of code basically means "when an element with id 'hide' is clicked, do something". So your button is missing that id

<button id="hide">Click me</button>

Upvotes: 1

Related Questions