Search code examples
javascriptjqueryhtmlhamburger-menuresponsiveness

JavaScript/HTML: Trouble linking JavaScript code to HTML

I only recently started using JavaScript, and I apologize if I flouted some fundamentals. I was following a tutorial on creating a responsive sticky navigation menu with JQuery, which also includes a hamburger menu when the browser window is shrunken. Source code for reference: https://www.dropbox.com/sh/2so52l4q74eu470/AABDHemSW_WsLUlBfPaLsNwsa?dl=0

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ResponsiveNav</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">

  // Menu-toggle button

  $(document).ready(function() {
        $(".menu-icon").on("click", function() {
              $("nav ul").toggleClass("showing");
        });
  });

  // Scrolling Effect

  $(window).on("scroll", function() {
        if($(window).scrollTop()) {
              $('nav').addClass('black');
        }

        else {
              $('nav').removeClass('black');
        }
  })


  </script>

However, the problem is if I try to put this JavaScript code onto a separate JavaScript file (shown below where I attempted to split the html code and the JavaScript code) and try to link it with the HTML file, the hamburger menu is no longer clickable. I really can't wrap my head around this on whether it is an indention problem in the JavaScript code or wrong format.

HTML code (where I attempted to link the HTML file to the JavaScript file with the JavaScript code.)

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ResponsiveNav</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="js/script.js"> </script>

  </head>

JavaScript file named script.js and placed in a folder called 'js' 

  // Menu-toggle button

  $(document).ready(function() {
        $(".menu-icon").on("click", function() {
              $("nav ul").toggleClass("showing");
        });
  });

  // Scrolling Effect

  $(window).on("scroll", function() {
        if($(window).scrollTop()) {
              $('nav').addClass('black');
        }

        else {
              $('nav').removeClass('black');
        }
  })

Kinda been stuck on this for an hour, so basically instead of having the JavaScript code in the HTML file, how can I properly link the HTML file with the JavaScript code on a JavaScript file?

Solution

  • It might be smth wrong with the path to your script.js file. You can try smth like: 

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

    or

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

    Also look at the console in devTools, it might be some errors there if the path is wrong.