Inserting javascript in to html file

Question

How can I run this script, tried to run it in html file, but it doesn't seem to work..

I want this code to be in single html file, is it possible? or do I need different files? http://jsfiddle.net/ambiguous/jcnMa/1/

<script type="text/javascript">
$('.question, .answer')
    .css("display", "none");
$('.section')
    .click(function ()
{
    var $others = $('.question:visible')
        .not(this);
    $others.next('.answer')
        .hide();
    $others.slideToggle(500);
    $(this)

        .next('.question')
        .slideToggle(500);
});
$('.question')
    .click(function ()
{
    $(this)
        .next('.answer')
        .slideToggle(500);
});
</script>

Did you include the jQuery-Library is it is included in your jsfiddle? — Nippey
– Nippey, Commented Nov 4, 2012 at 10:18

David Thomas · Accepted Answer · 2012-11-04 10:23:05Z

2

First make sure you're including the jQuery library:

<script src="path/to/jquery.min.js"></script>

Make sure you're not including the jQuery within those tags, so you've got:

<script src="path/to/jquery.min.js"></script>
<script>
    /* Your jQuery here */
</script>

And then ensure you're using a $(document).ready(), or $(window).load(), handler:

<script src="path/to/jquery.min.js"></script>
<script>
    $(document).ready(
        function(){
            /* Your jQuery here */
        });
</script>

The requirement for the $(document).ready() (or $(window).load()) is to ensure that the DOM is constructed, and the elements to which you want to bind events are present. Without those handlers the browser will try to bind events as soon as it encounters your script, without waiting for the elements to exist or be created, which results in non-functioning event-binding.

answered Nov 4, 2012 at 10:23

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

hish Over a year ago

I prefer to load the script at the end of page insted of using $(document).ready

David Thomas Over a year ago

@hish: it's more or less irrelevant whichever way it's done, my personal preference is to insulate the JavaScript from future DOM-rearrangement and encapsulate within a DOM-ready (or window-load) event, in the event a future client, or developer, wants to move the script from one place to another. That said, I tend to start with my scripts in the head anyway, so they're required for my starting use-case.

hish Over a year ago

as performance it is better to add the javescript at the end of file. so the script will not block the page load .

maarcs Over a year ago

tryed to get exampkle from w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle and it worked out, but when i made multiple sections first one only worked

David Thomas Over a year ago

Then you need to very clearly articulate exactly what you mean by 'not working.' Any errors in your JavaScript console? Is jQuery being loaded (look at the network/resources tabs in your developer tools)?

|

hish · Accepted Answer · 2012-11-04 10:01:41Z

0

put this code before the body close tag

Your Code 
</body>

answered Nov 4, 2012 at 10:01

hish

1454 bronze badges

6 Comments

hish Over a year ago

yes because you select object from the dom so when this code execute you need to be sure that dom element exists . if they not exists it will return error .

hish Over a year ago

at the header tag load the jquery library

maarcs Over a year ago

jquery library... ok. :D not sure how to load it, and where to get that

maarcs Over a year ago

hish Over a year ago

|

Luca Borrione · Accepted Answer · 2012-11-06 09:08:29Z

I would go this way:

<head>
    ...
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.question, .answer').css("display", "none");
            $('.section').click(function ()
            {
                var $others = $('.question:visible').not(this);
                $others.next('.answer').hide();
                $others.slideToggle(500);
                $(this).next('.question').slideToggle(500);
            });
            $('.question').click(function ()
            {
                $(this).next('.answer').slideToggle(500);
            });
        });
    </script>
    ...
</head>

First you need to ensure jquery lib is loaded, then you might notice that your code is referring to object in DOM, so you can access them only when the page is loaded (or after they are entered in the body code). I prefer to store my js code in the head section whenever it's possible.

Collectives™ on Stack Overflow

Inserting javascript in to html file

3 Answers 3

8 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related