Is javascript properly linked to html? Why is the script not running?

Question

I've been trying to learn JavaScript and found a tutorial about making a mobile responsive header. I have every thing working except the javasript. I have tried linking the file, didn't work. I found out I needed jQuery to run scripts, so I linked that. And lastly I tried to include the actual script in the HTML code. Still not working

Here is the link to the tutorial, my desired result. http://jsfiddle.net/giobongio/DwrGK/2/

And here is my code is below, which is identical to the sample code. Please show me what I'm doing wrong.

HTML

<html>
<head>
<script  language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
// create smartbutton
$('nav').before('<div id="smartbutton"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');

// add click listener
$('#smartbutton').click(function(event) 
{
  $('nav').animate({height:'toggle'},200);
});

</script>
<link rel="stylesheet" type="text/css" href="C:\Users\Anna\Desktop\Mobile Responsive\header.css">
</head>
<body>
<header>
    <a id="logo" href="#"></a>
    <nav>
        <a href="#" class="navitem">Option 1</a>
        <a href="#" class="navitem">Option 2</a>
        <a href="#" class="navitem">Option 3</a>
    </nav>
</header>
</body>
</html>

JavaScript

// create smartbutton
$('nav').before('<div id="smartbutton"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');

// add click listener
$('#smartbutton').click(function(event) 
{
  $('nav').animate({height:'toggle'},200);
});

Thank you to all who helps, I've very appreciative. I am VERY NEW to JavaScript and I need some guidance.

A quick tip: Always put your javascript at the bottom of your page — sunitj, Nov 16 '15 at 08:13
@sunitj: nope. Put the JS where it makes sense to put it. Which can be in the head. — Cerbrus, Nov 16 '15 at 08:15
@Cerbrus IMO putting javascript in the head blocks the rendering of the page. So either add 'async' to the JS in head or move it to footer. But there is no particular advantage of keeping JS in head in this case. Personally i prefer putting external JS files at bottom and only keep embedded JS code in head, so that it doesn't cause further delay for a user — sunitj, Nov 16 '15 at 08:20
@sunitj: Oh I agree, but as you just said yourself, there are some cases where you do put JS in the head. — Cerbrus, Nov 16 '15 at 08:22

score 0 · Answer 1 · answered Nov 16 '15 at 08:10

A browser executes your script right during its loading. As your script is located in <head>, your DOM structure is not loaded by the time of its execution.

For example, browser executes jQuery selector $('nav'), but there is still no such element.

You need to either:

Move your script so that it is located in <body> tag after the affected DOM elements. For example, in the end of your <body> tag for the whole document

<body>
    <header>
        <a id="logo" href="#"></a>
        <nav>
            <a href="#" class="navitem">Option 1</a>
            <a href="#" class="navitem">Option 2</a>
            <a href="#" class="navitem">Option 3</a>
        </nav>
    </header>
    <script>
        $('nav').before('<div id="smartbutton"></div>');
        $('#smartbutton').append('<div class="buttonline"></div>');
        $('#smartbutton').append('<div class="buttonline"></div>');
        $('#smartbutton').append('<div class="buttonline"></div>');

        // add click listener
        $('#smartbutton').click(function(event) 
        {
            $('nav').animate({height:'toggle'},200);
        });
    </script>
</body>

Use $(document).ready handler:

$(document).ready(function() {
    $('nav').before('<div id="smartbutton"></div>');
    $('#smartbutton').append('<div class="buttonline"></div>');
    $('#smartbutton').append('<div class="buttonline"></div>');
    $('#smartbutton').append('<div class="buttonline"></div>');

    // add click listener
    $('#smartbutton').click(function(event) 
    {
      $('nav').animate({height:'toggle'},200);
    });
});

score 0 · Answer 2 · answered Nov 16 '15 at 08:14

The difference is that the javascript in the example is run when the window has finished loading. See the onload in the drop down on the left hand side of jsfiddle? Your javascript executes before you've created any dom elements. To get this working quickly you could move the javascript to the bottom of your document,or you could include jquery and wrap your code within the script tags in:

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

This method will capture your code as a function (delegate) and execute it when it is triggered. In this case, when the document is ready; or in English, when all of the html (dom) elements have been created. This means your javascript will actually have elements to work on.

Is javascript properly linked to html? Why is the script not running?

2 Answers2

Linked