Can't get my JavaScript to load for some reason

Question

I'm new to web dev and working on Udacity's Front-End WebDev Nanodegree and I can't get this simple js to work. It should add 4 more <div>'s but it's not linked correctly or something. I've tried, and exhausted, google and other SO questions, but it's still not working for me.

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="test.js"></script>
    <meta charset="UTF-8">
</head>
<body>
<div>
    <div>
        <div id='family1'>
            <h1>Family1</h1>
            <div id='alex'>
                <h2>Alex</h2>
                <div id='jane'>
                    <h3>Jane</h3>
                </div>
            </div>
            <div id='taylor'>
                <h2>Taylor</h2>
                <div id='bob'>
                    <h3>Bob</h3>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

Here is my JS:

var family1, family2, bruce, madison, hunter;

family1 = $('#family1');
family2 = $('<div id="family2"><h1>Family 2</h1></div>');
bruce = $('<div id="bruce"><h2>Bruce</h2></div>');
madison = $('<div id="madison"><h3>Madison</h3></div>');
hunter = $('<div id="hunter"><h3>Hunter</h3></div>');

family2.insertAfter(family1);
family2.append(bruce);
bruce.append(madison);
bruce.append(hunter);

Your jQuery is indeed valid, and has valid targets. The problem either lies in your link to your `.js` file (which would be a sibling file in your example), or in your cache. Have you tried `CTRL + F5` and also holding `SHIFT` while clicking on the refresh icon? Do you get any errors in the console? — Obsidian Age, Jan 16 '18 at 02:11
what do you see in Chrome console? any 404 or javascript errors. Press F12 to open console in chrome windows. — kiranvj, Jan 16 '18 at 02:12
The code itself works fine: https://jsfiddle.net/ntLm3m9x/ So the issue must be your files and where they are saved. — 7zark7, Jan 16 '18 at 02:13
I'm also getting a suggestion from WebStorm under the insertAfter function that says Unresolved function or method. And it is also saying this under the $'s. — MMelvin0581, Jan 16 '18 at 02:19
https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Jan 16 '18 at 02:26
Ok, I added jQuery Library to WebStorm and it got rid of the suggestions but it is still not showing the other divs that are supposed to be added when I load the html. Also, holding shift and/or using ctrl + f5 did not work. — MMelvin0581, Jan 16 '18 at 02:29
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Zze, Jan 16 '18 at 02:35

score 2 · Accepted Answer · answered Jan 16 '18 at 02:30

2

I assume that you just need to add document.ready

$(document).ready(function(){
  var family1, family2, bruce, madison, hunter;

  family1 = $('#family1');
  family2 = $('<div id="family2"><h1>Family 2</h1></div>');
  bruce = $('<div id="bruce"><h2>Bruce</h2></div>');
  madison = $('<div id="madison"><h3>Madison</h3></div>');
  hunter = $('<div id="hunter"><h3>Hunter</h3></div>');

  family2.insertAfter(family1);
  family2.append(bruce);
  bruce.append(madison);
  bruce.append(hunter);
});

As the script is BEFORE your body tag, it attempts to find all the elements by those ids, however in reality, the DOM has not initialized these elements yet, so you have to tell your jquery to wait until it is "ready".

answered Jan 16 '18 at 02:30

Zze

15,599
9
68
98

That did it. Thank you. I wonder why it does not show this in the lesson quiz? – MMelvin0581 Jan 16 '18 at 02:34
I'm not sure why @MMelvin0581, it is very commonplace to use this event binding. – Zze Jan 16 '18 at 02:36
Can someone explain to me how I say nearly the exact same thing and end up downvoted and contradicted in the comments? I really want to understand what made the answer inadequate – Greg Rozmarynowycz Jan 16 '18 at 02:40
I first saw where you told me to put the script at the end. That didn't work. I now see where you added the second part. I don't believe that was there before I saw this answer. Sorry. As for the down vote, I don't know, I dont have enough rep. – MMelvin0581 Jan 16 '18 at 03:12
@Zze at the very end of that lesson they finally talk about it and then have me do a project using it. Not sure why they didn't mention before hand though. Maybe because it was preloaded in the on screen editor? Who knows? Thanks again for the help. – MMelvin0581 Jan 16 '18 at 03:14

Greg Rozmarynowycz · Answer 2 · 2018-01-16T02:30:44.883

You need to move your script tag to the end of your body so that the elements exist before try to access/modify them:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <meta charset="UTF-8">
</head>
<body>
<div>
    <div>
        <div id='family1'>
            <h1>Family1</h1>
            <div id='alex'>
                <h2>Alex</h2>
                <div id='jane'>
                    <h3>Jane</h3>
                </div>
            </div>
            <div id='taylor'>
                <h2>Taylor</h2>
                <div id='bob'>
                    <h3>Bob</h3>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="test.js"></script>
</body>

You could also wrap your code in a load/ready event:

$(document).ready(function(){
  var family1, family2, bruce, madison, hunter;

  family1 = $('#family1');
  family2 = $('<div id="family2"><h1>Family 2</h1></div>');
  bruce = $('<div id="bruce"><h2>Bruce</h2></div>');
  madison = $('<div id="madison"><h3>Madison</h3></div>');
  hunter = $('<div id="hunter"><h3>Hunter</h3></div>');

  family2.insertAfter(family1);
  family2.append(bruce);
  bruce.append(madison);
  bruce.append(hunter);
});

Can you point me to an example demonstrating this (not wrapped in any event listener or using `defer`/`async`)? I've never known this to be the case, and I'm looking at an example in Chrome right now showing the opposite. — Greg Rozmarynowycz, Jan 16 '18 at 02:26

Can't get my JavaScript to load for some reason

2 Answers2