How to add javascript to HTML Page?

Question

I am new to web development and I want to add following function to my simple html page but if I press "click me" does not happen anything. description part does not hide and show

This is the code I tried

I added those codes as below. CSS is working perfectly. but JavaScript does not work. How can I fix this issue

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="hpcss.css">
<script>
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});
</script>


</head>
<body align="center">
<a href="#" class="clickme">Click Me</a>
<div class="box">
    First Description
</div>

<a href="#" class="clickme">Click Me</a>
<div class="box">
    Second Description
</div>


</body>

</html>

Div tag does not hide and show... I added to javascript to <head> tag. Is it correct ? — DSM
– DSM, Commented Feb 3, 2015 at 6:52

epoch · Accepted Answer · 2015-02-03 06:57:30Z

You need to import jQuery, and only run the code once jQuery has loaded

HTML:

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

JS:

$(function() {
    // your code here
})

The fiddle is working because jsfiddle automatically runs on DOM load, and inserts jQuery for you.

here is the actual source from jsfiddle (behind the scenes):

<script type='text/javascript'>//<![CDATA[ 
$(function(){
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

});//]]>  

</script>

Hugevn · Accepted Answer · 2015-02-03 06:53:16Z

2

you should do somethings like that:

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

you run javascript before finishing load html --> error

answered Feb 3, 2015 at 6:53

Hugevn

1566 bronze badges

2 Comments

Arunprasanth K V Over a year ago

the questioner says with the above answer his problem is solved , then why it gets down votes?

rossipedia Over a year ago

This is wrong. The fact that it works is irrelevant. The answer says "you run javascript before finishing load html", which is incorrect. Javascript is not jQuery. jQuery is a library that is written in Javascript.

Haider Ali Khichi · Accepted Answer · 2015-02-03 06:53:29Z

2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

embed this before your script.

answered Feb 3, 2015 at 6:53

Haider Ali Khichi

456 bronze badges

Comments

userlond · Accepted Answer · 2015-02-03 07:05:14Z

1

Try to wrap your js code into

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function() {
        // your code will be here       
    });
</script>

It means that your code will be executed after page elements are loaded. Also I'v added jquery include.

edited Feb 3, 2015 at 7:05

answered Feb 3, 2015 at 6:53

userlond

3,8442 gold badges41 silver badges56 bronze badges

Comments

MisterBla · Accepted Answer · 2015-02-03 06:55:42Z

You attach the events before the DOM is created. When you're calling

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

The elements with the clickme class have not been created yet.

You can fix it by putting your script tags before the </body> tag, but by wrapping your javascript in a self-executing function like so:

$(function()
{
    // Hide all the elements in the DOM that have a class of "box"
    $('.box').hide();

    // Make sure all the elements with a class of "clickme" are visible and bound
    // with a click event to toggle the "box" state
    $('.clickme').each(function() {
        $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
            e.preventDefault();

            // Find the next "box" element in the DOM
            $(this).next('.box').slideToggle('fast');
        });
    });
});

Also, you're not including the jQuery library.

Always check the console for errors.

Collectives™ on Stack Overflow

How to add javascript to HTML Page?

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related