Linking JavaScript to my HTML

Question

Please help, I'm new to web design and want to make the demo below work but it seems my HTML is not linking to my javascript. please view the code below, the demo is also available at http://jsfiddle.net/xx9ykonc/ How do I make it work, I don't understand whats missing.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>

<table>
    <tr>
        <td><div>1</div></td>
        <td><div>2</div></td>
        <td><div>3</div></td>
        <td><div>4</div></td>
    </tr>            
</table>

<script>
$('table div')
    .on('mouseenter', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: -10,
            width: "+=20",
            height: "+=20"
        }, 'fast');
    })
    .on('mouseleave', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: 0,
            width: "-=20",
            height: "-=20"
        }, 'fast');
    })
</script>

</body>
</html>

What exactly is the problem? What do you mean by linking? The Fiddle seems to work as intended. — Mitya
– Mitya, Commented Apr 19, 2016 at 10:25
What do you want to happen; what is happening, and what (if any) error messages do you get in the browser console (usually available by pressing F12)? — ArtOfCode
– ArtOfCode, Commented Apr 19, 2016 at 10:26
Add <script src="code.jquery.com/jquery-2.2.3.js"></script> inside the <head> section of your HTML. Then the script should work. — Rocker1985
– Rocker1985, Commented Apr 19, 2016 at 10:35
You are using jQuery, but have not included the jquery.js file itself to the HTML. That is why the js code is not working. — Rocker1985
– Rocker1985, Commented Apr 19, 2016 at 10:36

hacene abdessamed · Accepted Answer · 2016-05-03 18:50:32Z

4

You should include jquery by adding this script in the head of your html page

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

edited May 3, 2016 at 18:50

answered Apr 19, 2016 at 10:38

hacene abdessamed

5696 silver badges22 bronze badges

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

1 Comment

Pepelius Over a year ago

To be more specific: OP is using jQuery in his/her <script> tags, and the page does not load any version of the jQuery which is required for any of it to work. JSFiddle I believe has a built-in support for jQuery, and thereby the code might work there just fine, but when moving to localhost or where ever else, it wont.

itzmebibin · Accepted Answer · 2016-04-19 10:47:14Z

2

As @Rocker1985 mentioned in the comment, you can link the jquery file to your HTML like which you have already link the CSS file.

<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
  <script script src="~/Scripts/jquery-1.10.2.min.js"></script>
  <script script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
</head>

Give the exact path and version of jquery file.

edited Apr 19, 2016 at 10:47

answered Apr 19, 2016 at 10:39

itzmebibin

9,4479 gold badges52 silver badges63 bronze badges

1 Comment

Rocker1985 Over a year ago

-1. The tags in the question is "javascript", "jquery", "html" and "css". It can be assumed that the OP is not using ASP.Net MVC, he is using plain HTML. The "@Url.Content" syntax will not work in plain HTML.

Iqbal Pasha · Accepted Answer · 2016-04-19 10:49:08Z

in your html you have missed jquery library link just you need to attach source link it will work also you can check the same below

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<table>
    <tr>
        <td><div>1</div></td>
        <td><div>2</div></td>
        <td><div>3</div></td>
        <td><div>4</div></td>
    </tr>            
</table>

<script>
$('table div')
    .on('mouseenter', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: -10,
            width: "+=20",
            height: "+=20"
        }, 'fast');
    })
    .on('mouseleave', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: 0,
            width: "-=20",
            height: "-=20"
        }, 'fast');
    })
</script>

</body>
</html>

Collectives™ on Stack Overflow

Linking JavaScript to my HTML

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related