Question

Technologies:

javascript

html

css

Tolerim

3 hours ago

The JavaScript is functional in Codepen, but not functioning in the browser.

The following is my code on CodePen, with a broken image: https://codepen.io/kornstalk/pen/ZEqXrgq. Despite some errors, I am attempting to use HTML, CSS, and JS together. However, I am facing an issue where the icon animation breaks whenever the code is run on the browser. The menu itself functions properly (the styling issues will be addressed later). The error message indicates that the Icon is undefined. Below is the complete HTML code. I have attempted the code below to resolve the issue, but despite no errors being displayed, there is no animation. Please offer any helpful guidance.

<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <title>Rlayout</title>
  <meta name="description" content="This site will serve as the hub for many sub responsive 
layouts">
  <meta name="viewport" content="width=device-width, initial-  scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">

  <link rel="stylesheet" href="css/main.css">
  <meta name="theme-color" content="#fafafa">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Fonts-->

  <!--Providence Sans-->
  <link rel="stylesheet" href="https://use.typekit.net/xzx3vba.css">

</head>

<body>
  <header class="header">
    <img class="logo" src="img/giz2.jpg" alt="This is our company logo">
    <nav class="main-nav">
      <a href="">About</a>
      <span> | </span>
      <a href="">Contact</a>
      <span> | </span>
      <a href="">Work</a>
    </nav>
    <div class="mobile-nav-wrapper">
      <a href="javascript:void(0);" class="icon" data= "hamburger-menu" onclick="myFunction()">
      <span></span>
      <span></span>
      <span></span>
      </a>
      <nav id="myLinks" class="mobile-main-nav">
        <a href="">Work <span></span></a>
        <a href="">About</a>
        <a href="">Contact</a>
      </nav>
    </div>
  </header>

  <footer>
    <p>&copy; 2500</p>
    <div>
      <img src="./img/giz2.jpg" alt="">
      <img src="./img/giz2.jpg" alt="">
    </div>
  </footer>

  <script src="js/main.js"></script>
  
  <script>
  var Icon = document.querySelector(".icon");
  var Icon1 = document.querySelector(".icon span:nth-child(1)");
  var Icon2 = document.querySelector(".icon span:nth-child(2)");
  var Icon3 = document.querySelector(".icon span:nth-child(3)");
  </script>
</body>

</html>

I've tried the above code, but the animations still do not play. Any help would be greatly appreciated.

Answers(1)

Accepted Answer

It seems like the issue is with your JavaScript code not properly referencing the elements you are trying to animate. To fix this, make sure that your HTML code contains the elements you are referencing in your JavaScript code. In this case, it looks like you are trying to reference the spans inside the "icon" element. Therefore, you need to make sure that your HTML has something like this:

<a href="javascript:void(0);" class="icon" data= "hamburger-menu" onclick="myFunction()">
  <span></span>
  <span></span>
  <span></span>
</a>

Once you have those span elements in your HTML, your JavaScript code should work properly to animate them.