Code works in Codepen, but not on my site

Question

I'm really new to Javascript and I've been spending forever trying to fix this issue. My code works just how I want it to on my [Codepen]

$(window).on("scroll", function() {
  if ($(window).scrollTop() > 10) {
    $(".topnav").addClass("active");
    $(".mustang").addClass("active");
    $(".sally").addClass("active");
  } else {
    $(".topnav").removeClass("active");
    $(".mustang").removeClass("active");
    $(".sally").removeClass("active");
  }
});

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

However it won't work on [my website]. The big issue is that the navbar on top will not change color on my website, but on my Codepen it changes perfectly.

I'm almost certain it's an issue with my Javascript and I'd really appreciate it if someone could help me out. Thank you.

If you check the console on your website (press F12, or right click > Inspect) then you'll see a single error: `$ is not defined`. This is because, although you've included jQuery in the page, it needs to come *first* - before bootstrap and your own code. — Rory McCrossan, Dec 01 '17 at 10:44
"Uncaught ReferenceError: $ is not defined" I think first you need to include jquery library. — Katty, Dec 01 '17 at 10:47
@MarcoSalinas no problem, glad to help. I added an answer for you below with some tweaks to your JS logic too. — Rory McCrossan, Dec 01 '17 at 10:49
How is the Title related to the rest of the question? They seem rather different, maybe you can try to write a better Title. — Peter B, Dec 01 '17 at 10:53

score 3 · Accepted Answer · answered Dec 01 '17 at 10:49

If you check the console on your website (press F12, or right click > Inspect) then you'll see a single error:

$ is not defined

This is because, although you've included jQuery in the page, it needs to come first - before your own code.

<head>
  <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="post1.css">

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

Also note that you can simplify your JS logic by using toggleClass() and providing a function to addClass():

$(window).on("scroll", function() {
  $('.topnav, .mustang, .sally').toggleClass('active', $(window).scrollTop() > 10)
});

function myFunction() {
  $('#myTopnav').addClass(function() {
    return $(this).hasClass("topnav") ? 'responsive' : 'topnav');
  });
}

score 1 · Answer 2 · answered Nov 19 '20 at 18:53

1

I think because if you go to settings, and click js, you will see there is Add External Scripts/Pens In that section, there will be some URLs. Copy them and put them on your website.

answered Nov 19 '20 at 18:53

Green

486
2
11
31

score 0 · Answer 3 · edited Feb 05 '23 at 04:29

0

In the script tag,

<script src="index.js"></script>

use defer

<script src="index.js" defer></script>

edited Feb 05 '23 at 04:29

andrewJames

19,570
8
19
51

answered Feb 05 '23 at 04:07

jim

1

You can visit the [help] and take a look at how to format your code using Markdown. – andrewJames Feb 05 '23 at 04:30

Code works in Codepen, but not on my site

3 Answers3