Why does this not work?

Question

It's probably something really simple, but I'm in Notepad++ right now, and this ajax request I made with jQuery is not working, but all the other jQuery works. I've checked the syntax and the file several times, I've even tried in in workspaces here and it works perfectly. Don't know why it doesn't work in Notepad++ but here is the page with the element I'm loading the text into:

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: Impact, fantasy;
}
.div1 {
   position: absolute;
   padding: 250px;
   height: 1px;
   left: 30px;
   right: 30px;
   bottom: 20px;
   top: 20px;
   background-color: lightgray;
   font-size: 25px;
   border-radius: 15px;
}
.line1 {
   padding: 3px;
   background-color: black;
   border-radius: 10px;
   border-color: transparent;
}
.div2 {
   position: absolute;
   top: 25px;
   left: 35px;
   right: 35px;
}
a {
   color: darkgray;
}
.image1 {
   position: absolute;
   bottom: -246px;
   left: 185px;
   height: 350px;
   width: 1000px;
   border-radius: 15px;
   filter: grayscale(100%);
}
.footer {
   position: absolute;
   padding: 40px;
   bottom: -421px;
   left: 0;
   right: 0;
   background-color: black;
   border-color: transparent;
   border-radius: 10px;
   text-align: center;
   color: darkgray;
}
.see {
   color: darkgray;
}

</style>
<title>Penitentiary | Official Website | About</title>
</head>
<body>
<div class = div1>
<div class = div2>
<h1 class = heading>Penitentiary</h1>
<hr/ class = line1>
<p>Penitentiary is a fairly new band with a lot to offer. Founded in 2015, it includes members <a>Stevie McCollam</a>, <a>Jordan Phillips</a>, <a>Zack Tolley</a>, and <a>A.J. Lester</a>. Stevie is the <a>Drummer</a>, Jordan plays the <a>Electric Guitar</a>, Zack plays the <a>Acoustic Guitar</a>, and A.J. rocks the <a>Microphone</a>. These four have worked incessantly to learn songs by legends like Metallica, Guns 'N Roses, Led Zeppelin, and so many more. As of the day this page was written, Penitentiary has no albums or songs of their own, but their future looks bright. The young band is always working hard to emulate the likes of their idols. To those that have watched him, lead guitarist Jordan Phillips reminds some of the likes of a young <a>Slash</a> or <a>Kirk Hammett</a>.</p> <b class = see>See More</b> <p class = loadAjax></p>
</div>
</div>
<img class = image1 src = https://cdn.pixabay.com/photo/2017/08/04/10/36/background-2579719_960_720.jpg> 
<footer class = footer>
        <div class = foot-text>
        <p>
        Follow Us On:
        </p>
        <img height = "20" width = "20" src = http://www.stickpng.com/assets/images/584ac2d03ac3a570f94a666d.png>
        <img height = "20" width = "20" src = https://www.shareicon.net/download/2015/09/16/102081_twitter_512x512.png>
        <img height = "20" width = "20" src = https://instagram-brand.com/wp-content/themes/ig-branding/assets/images/ig-logo-email.png>
        <img height = "20" width = "20" src = https://thecedaliusgroup.com/wp-content/uploads/2014/11/LinkedIn-InBug-2CRev.png>
        </div>
        </footer>
<script src = jQuery2.js></script>
<script>
$(document).ready(function() {
$('.div1').mouseover(function() {
$('.div1').animate({backgroundColor: 'darkgray'});
});
$('.div1').mouseout(function() {
$('.div1').animate({backgroundColor: 'lightgray'});
});
let see = document.getElementsByClassName('see')[0];
see.addEventListener('click', () => {
$('.div1').animate({height: '80px'});
$('.image1').animate({bottom: '-325px'});
$('.footer').animate({bottom: '-500px'});
$('.see').hide();
$('.loadAjax').load('More.html');
});
});
</script>
</body>
</html>

And here is the file I'm getting the text from:

<html>
<head></head>
<body>
<p>This gives you some idea of how good Jordan is with a guitar in his hands. His skill added with Zack's background guitar is really fun and interesting to listen to. On top of it all, Stevie's drumming is superb and A.J's vocals are too. Each individual member undoubtedly has their own skill, but it's when they come together as a band that their sound really comes to life. As for the name, what's a more kick-ass name than Penitentiary? Duh. This band is a tight neck group that's going places.</p>
</body>
</html>

Any help is appreciated

Answer 1 · 2018-05-03T07:55:03Z

May 3, 2018 7:55am

$('.loadAjax').load('More.html');

You are loading your More.html into all elements that have the class .loadAjax, but there isnt any elements in your html markup that has the class.

Answer 2 · 2018-05-03T21:24:30Z

May 3, 2018 9:24pm

There should be. The only element that has that class is the p element right beside the p element with the text "See More"

Answer 3 · 2018-05-04T07:30:51Z

May 4, 2018 7:30am

Ah i must have typed wrong when i searched for the class. I pasted your code into my editor and the syntax highlighting greyed out the code <p class="loadAjax"></p>. So there must be a element which isnt closing properly.

But you should reconsider to change your markup to correct way, that also might be the issue it doesnt work.

<div class = div1>

<!-- correct way -->
<div class="div1">

If you move your p.loadAjax element it will work as intended.

Answer 4 · 2018-05-04T20:13:12Z

May 4, 2018 8:13pm

I moved the element a line down and put quotes around the class name, it still doesn't work

Welcome to the Treehouse Community

Looking to learn something new?

Jackson Monk

Jackson Monk

Why does this not work?

4 Answers

Martin Lecke

Martin Lecke

Jackson Monk

Jackson Monk

Martin Lecke

Martin Lecke

Jackson Monk

Jackson Monk