how to link correctly this external js with html

Question

I am trying to learn myself html and found this js fiddle link

Now am trying to create a simple webpage ,but seems that am missing something as I can not see the desired output.

Here is my HTML Code part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='NewFolder/js.custom.js'></script>
</head>
<body>
<ul>
    <li class="togglevisibility">Toggle Me 1
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
    <li class="togglevisibility">Toggle Me 2
        <ul> 
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </li>
    <li class="togglevisibility">Toggle Me 3
        <ul> 
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </li>
</ul>
<body>
</html>

and the custom.js

jQuery(document).ready(function($){
    $("li>ul").hide();

    $(".togglevisibility")
      .mouseenter(function() {
          $(this).children("ul").slideDown();
      })
      .mouseleave(function() {
          $(this).children("ul").slideUp();
      });
  });

What am I missing?

possible duplicate of [Javascript that executes after page load](http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — Cerbrus, Feb 11 '14 at 08:10

score 1 · Accepted Answer · answered Feb 11 '14 at 08:17

1

You are missing jQuery itself! include

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

answered Feb 11 '14 at 08:17

Mahesh Thumar

4,257
5
22
30

@Sham — You must add it *before* the script that depends on jQuery. – Quentin Feb 11 '14 at 08:54
@ Quentin this is how the html looks right now ; is that ok ? – Sham Feb 11 '14 at 09:16
@Sham: This is okey! Also confirm that you are giving right path for your custom.js i.e. your NewFolder and html file both are at same level. – Mahesh Thumar Feb 11 '14 at 09:19
@ Mahesh yes the path is rightly mentioned in html but i dint get that "same level" thing at present inside the main directory index.html is present and another directory named js is there and inside that custom.js I think thats ok – Sham Feb 11 '14 at 09:34
I may be asking too much but can u run my script at your end with the external js – Sham Feb 11 '14 at 09:35
@Sham: Is your index.html inside the NewFolder ? – Mahesh Thumar Feb 11 '14 at 09:37
Can you try using – Mahesh Thumar Feb 11 '14 at 09:48
sry for misleading you Its working now there was a space in between the directory name – Sham Feb 11 '14 at 09:53

score 0 · Answer 2 · answered Feb 11 '14 at 08:17

0

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

include the file

answered Feb 11 '14 at 08:17

Vikas Gautam

997
7
23

@Sham — You must add it *before* the script that depends on jQuery. – Quentin Feb 11 '14 at 08:54
@ Quentin this is how the html looks right now is that ok ? – Sham Feb 11 '14 at 08:56

how to link correctly this external js with html

2 Answers2