CODEWITHSUNDEEP
javascriptjqueryshowhtml
anant
anant

Reputation: 13

show() div problem

I am an absolute beginner in this field. I have written the following code but it's not working. Can someone explain where is the error?

<script type="text/javascript">
    $("button").click(function(){
        $("div").show("slow");
    });
</script>

<button>show</button>
<div style="min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
<a href="http://#" style="display: none">this is a link</a>

Upvotes: 1

Views: 436

Answers (7)

pimvdb
pimvdb

Reputation: 154818

You execute the jQuery before the button is there. So at the point jQuery is executed, the button is not existent.

The solution is to use $(document).ready(...).

All elements on a page (HTML) are parsed to the DOM of that page. The DOM is a hierarchical collection of all elements. You can select elements out of it using jQuery.

However, obviously the DOM needs to be fully there before you can select the elements. In your case, you first select the button, and create it afterwards. That does not work. At the time of the selector the button does not exist yet.

Using jQuery's $(document).ready(), you can defer the function containing selectors until the DOM is fully loaded and parsed - at which time the selector works because the elements are there.

 <script type="text/javascript">
$(document).ready(function() {

        $("button").click(function(){
            $("div").show("slow");
        });

});
        </script>

        <button>show</button>
        <div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
         <a href="http://#" style="display: none">this is a link</a>

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

You code runs before the button is created so it cannot bind the event.

So you need to put your code in the document.ready event. In jQuery this is handled by $(document).ready(handler) or $(handler).

Documentation at http://api.jquery.com/ready/

Fix to your code to make it work

$(function(){ 
    $("button").click(function(){
        $("div").show("slow");
    });
});

demo at http://jsfiddle.net/gaby/vkrzt/

Upvotes: 0

Jules
Jules

Reputation: 7213

It probably is working but as your <div></div> is empty you might notice it.

Also make sure you only run your JQuery script AFTER the div has been added to your HTML.

May I also suggest to use better identifiers, because you might eventually have many div's and buttons on your page.

Example:

<button id="btn1">Click me</button>    
<div id="hidden_div" style="display: none">
    Hello there!
</div>

<script type="text/javascript">
   $('button#btn1').click(function() {
        $('div#hidden_div').show('slow');
   });
</script>

Upvotes: 0

oezi
oezi

Reputation: 51797

the javascript is executed before the document has loaded, so the click-handler can't be attached to the button. to avoid this, wrap your code into a domready-function like this:

$(document).ready(function() {
    $("button").click(function(){
        $("div").show("slow");
    });
}

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

As you can see from the fiddle here http://jsfiddle.net/bQUFE/ your code works (the div is shown when you click)

If you don't have this result always check:

1)that you loaded jquery before your script

2)Always use $(document).ready() like this:

$(document).ready(function(){
    $("button").click(function(){
        $("div").show("slow");
    });
});

Upvotes: 0

shanethehat
shanethehat

Reputation: 15560

You may be trying to listen for the click event before the button exists. Try waiting for the page contents to load:

<script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function(){
            $("div").show("slow");
        });
    });
</script>

<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
<a href="http://#" style="display: none">this is a link</a>

Upvotes: 0

user85569
user85569

Reputation: 384

you need to give your elements "id"

so:

<button id="mybutton"></button>

and

<div id="mydiv"></div>

Then you'll use $("#mybutton") or $("#mydiv") to call these

Upvotes: -1

Related Questions