How to add my js to my site. Github

I have asked about adding my css to my site on github and I’ve gotten it.

I also made a big mistake on not asking how to add my scripts to my site.
I’ve tried adding <link rel="stylesheet" type = "text/js" href="script.js"/>

but it didn’t work.

I also tried adding <script rel = "stylesheet" type = "text/js" href = "script.js"></script> but it still didn’t work.

Please teach me how to add my JS to my site on github.

Thanks.

For script you just need:

Link tag is for CSS.

<link rel="stylesheet" type="text/css" href="style.css">

Script tag for JS with close tag.

<script src="myscript.js" type="text/javascript"></script>

For script tag is best place the end of the page before </body>.

Not working. I named my js file “script.js”. Here is my code for that:
<script src="script.js" type="text/javascript"></script>

any ideas why it isn’t working?

Are the HTML and JS files in the same folder?
And you placed it right before </body>?
I think we will need to see your full code to figure it out.

I imported it from codepen so it has no body, html, doctype, etc…
Here’s the link:

Well if you are now going to work on this off of codepen you should probably add those things.

But try putting the script at the bottom of your HTML.

HTML files load from top to bottom. So if you have a script at the top it will load before the rest of your page. If your javascript code is manipulating any of the page elements, it will look like the code hasn’t worked because the elements haven’t been loaded yet!

It also makes the page load faster for the user if the javascript is at the bottom.

I’ve edited it, but it still doesn’t work. If you back to the github link, I’ve written where the site would be. The nav bar that is supposed to slide down when a user hovers over it is supposed to be hidden with jquery. It isn’t working because the slider nav bar isn’t hidden.

I tested your current code on GitHub. If I mouse-over the hamburger, the menu slides down. When I mouse-out of the menu, the menu slides back up and only the hamburger is shown.

What are you seeing?

What do you mean by hamburger?
I never inplemented one of them in there.

I see this:


My mouse was not over anything when I took the picture.

Make sure <script src="script.js" type="text/javascript"></script> appears after the jQuery script element or it will not work. Any libraries dependent on the code you write in script.js (in this case jQuery) must be loaded first.

1 Like

Thank you all for helping me. I got it.

I personally would not have both the mouseeneter and click events on the navbar, becuase if the user attempts to click on the navbar, the mouseenter executes first and by the time the user actually clicks on it, it toggles back up. I go with the click event as that is more standard practice.

I used the click one for if the site is being viewed on a phone and when you click on one of the links (if you are on a computer), the bar gets hidden.

I am using a desktop, so the mouseenter event is making it more difficult to click. That is why I said choose one or the other.

Okay. I’ll do it.
:slightly_smiling_face: