Javascript works in codepen but not on browser-CodePudding

const toggleButton = document.getElementsByClassName('navbar-toggle')[0];
const navbarLinks = document.getElementsByClassName('navbar-links');
toggleButton.addEventListener('click', function() {
  for(var i=0; i<navbarLinks.length; i  )
    navbarLinks[i].classList.toggle('active');
});

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Montserrat", sans serif;
}

.navbar ul {
  display: flex;
  width: 100%;
  align-items: center;
  background-color: none;
  color: black;
}

.navbar li {
  list-style-type: none;
  padding: 1rem;
}

.navbar a {
  text-decoration: none;
}
.navbar-logo {
  margin-right: auto;
  width: 250px;
  height: 150px;
  user-select: none;
}
.navbar-toggle {
  display: none;
}
.navbar-links:hover {
  color: rgba(245, 40, 145, 0.8);
  transition: all 0.3s ease 0s;
}
    button {
      padding: 9px 25px;
      color:white;
      background-color: rgba(245, 40, 145, 0.8);
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease 0s;
    }
    button:hover {
      background-color: rgba(245, 40, 145, 0.5);
    }


  @media (max-width: 600px) {
    .navbar ul {
      flex-wrap: wrap;
    }
    .navbar-toggle {
      display: block;
      cursor:pointer;
    }
    .navbar-links {
      display: none;
      width: 100%;
      text-align: center;
    }
    .active {
      display: block;
    }
  }




.slideshow {
    max-width: auto;
    height: 600px;
    display: block;
    position: relative;
    overflow: hidden;
}

img.mySlides {
  max-width: 100%;
          max-height: 100%;
          display: block;
          object-fit: cover;
 top: 0;
 left: 0;

}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KK Beauty Parlor </title>
    <link rel="stylesheet" href="CSS/homestyle.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a37ae7cae6.js" crossorigin="anonymous"></script>
    <script src="JS/myScript.js"></script>
  </head>
    <body>
      <nav >
      <ul>
        <img  src="images/KKLogo.svg">
        <li ><i ></i></li>
        <li ><a href="kkbp.html">Home</a></li>
        <li ><a href="products.html">Products</a></li>
        <li ><a href="services.html">Services</a></li>
        <li ><a href="Appointments.html">Appointments</a></li>
        <li ><a href="learnmore.html">Learn More</a></li>
        <li ><a href="#Login"><button>Login</button></a></li>
        <li ><a href="#Register"><button>Register</button></a></li>


      </ul>
    </nav>
      <section >
        <img  src="images/slideshow1.jpg" style="width:100%">
        <img  src="images/slideshow2.jpg" style="width:100%">
        <img  src="images/slideshow3.jpg" style="width:100%">
        <img  src="images/slideshow4.jpg" style="width:100%">
      </section>
      <script>
        // Automatic Slideshow - change image every 3 seconds
        var myIndex = 0;
        carousel();

        function carousel() {
          var i;
          var x = document.getElementsByClassName("mySlides");
          for (i = 0; i < x.length; i  ) {
            x[i].style.display = "none";
        }
      myIndex  ;
      if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 3000);
}
    </script>
    
  </body>
</html>

In the snippet, the hamburger icon does what its supposed to do, however, when I try to run it locally on my browser the hamburger icon doesn't work at all. Has anyone ever had an issue with this? Not sure why it's happening or how to fix it. Any ideas/advice? I'm working inside of Visual Studio Code and have tried both Safari and Google Chrome as a browser. JavaScript is enabled in both.

CodePudding user response：

I think it is happening because you're importing js file in the head tag. And that's why it is getting rendered before the HTML code does. And because of that the values of toggleButton and navbarLinks will be undefined.

So try moving your js import at the bottom after the body tag.

<body>...</body>
<script src="https://kit.fontawesome.com/a37ae7cae6.js" crossorigin="anonymous"></script>
<script src="JS/myScript.js"></script>

CodePudding user response：

Your JavaScript is loading before the HTML does, which means that the following code will be undefined, as it doesn't exist yet.

console.log(document.getElementsByClassName('navbar-toggle')[0]);

<!-- It's like there's nothing here for JavaScript! -->

To fix this, you can do two things.

Option #1

You can add the JavaScript at the end of the <body> tag. This makes the JavaScript load after all of the HTML has, as HTML loads line by line.

<body>
  <!-- Some HTML here... -->

  <script src="JS/myScript.js"></script>
</body>

Option #2

If you want to leave the JavaScript in the <head>, then you can add the defer attribute.

According to MDN...

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

So, you can simply change your code to below.

<head>
  <!-- Some HTML here... -->

  <script defer src="JS/myScript.js"></script>
</head>

Both of these will work, but it's up to you what you want to do.