Hamburger Menu Only Works on index.html, Not Other Pages in My Portfolio Website

I'm working on a personal portfolio website and have implemented a hamburger menu for mobile views. The hamburger menu works perfectly on my index.html page, but it doesn't function on any of the other pages like about.html or research.html.

The hamburger menu in my index.html works as expected, but when I navigate to any other page (e.g., about.html), clicking the menu doesn't do anything. I use the same HTML structure and link to the same external JavaScript file (scripts.js) for all pages.

Here's my setup:

index.html (Header part)

// JavaScript (scripts.js):

document.addEventListener('DOMContentLoaded', () => {
  const texts = [
    "where we explore the evolution and pharmacology of proteins.",
    "where we investigate the expansion of genes.",
    "where we conduct studies.",
    "where we study structure.",
    "where we learn new tools and explore visualization."
  ];

  let index = 0;
  const animatedTextElement = document.getElementById('animated-text');
  console.log('Animated text element:', animatedTextElement);

  function typeWriter(text, callback) {
    let i = 0;
    const speed = 50;

    function typing() {
      if (i < text.length) {
        animatedTextElement.textContent += text.charAt(i);
        i++;
        setTimeout(typing, speed);
      } else if (callback) {
        setTimeout(callback, 1000);
      }
    }

    typing();
  }

  function deleteText(callback) {
    let i = animatedTextElement.textContent.length;
    const speed = 30;

    function deleting() {
      if (i > 0) {
        animatedTextElement.textContent = animatedTextElement.textContent.substring(0, i - 1);
        i--;
        setTimeout(deleting, speed);
      } else if (callback) {
        setTimeout(callback, 500);
      }
    }

    deleting();
  }

  function cycleTexts() {
    typeWriter(texts[index], () => {
      deleteText(() => {
        index = (index + 1) % texts.length;
        cycleTexts();
      });
    });
  }

  cycleTexts();

  // Smooth scrolling for a specific section
  const videoSection = document.querySelector('.specific-section');
  if (videoSection) {
    const videoLink = document.querySelector('.scroll-to-section');
    if (videoLink) {
      videoLink.addEventListener('click', (event) => {
        event.preventDefault();
        videoSection.scrollIntoView({
          behavior: 'smooth'
        });
      });
    }
  }

  // Form validation
  function validateForm(event) {
    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();
    const message = document.getElementById("message").value.trim();

    if (name === "" || email === "" || message === "") {
      alert("Please fill in all the required fields.");
      event.preventDefault(); // Prevent form submission if validation fails
      return false;
    }

    return true;
  }

  const form = document.getElementById("formId");
  if (form) {
    form.addEventListener("submit", validateForm);
  }

  // Hamburger menu toggle
  const hamburgerMenu = document.querySelector('.hamburger-menu');
  const navMenu = document.querySelector('.nav-menu');

  console.log('Hamburger menu:', hamburgerMenu);
  console.log('Nav menu:', navMenu);

  if (hamburgerMenu && navMenu) {
    hamburgerMenu.addEventListener('click', () => {
      navMenu.classList.toggle('active');
    });
  }
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RohanNathHERE/EvoGenomics/styles.css">

<!-- index.html -->

<header>
  <div class="nav-container">
    <div class="hamburger-menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <nav class="nav-menu">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </div>
</header>
<main>
  <p>Welcome to my Portfolio, <span id="animated-text"></span></p>
</main>

about.html (Same structure as index.html for the header)

// JavaScript (scripts.js):

document.addEventListener('DOMContentLoaded', () => {
  const texts = [
    "where we explore the evolution and pharmacology of proteins.",
    "where we investigate the expansion of genes.",
    "where we conduct studies.",
    "where we study structure.",
    "where we learn new tools and explore visualization."
  ];

  let index = 0;
  const animatedTextElement = document.getElementById('animated-text');
  console.log('Animated text element:', animatedTextElement);

  function typeWriter(text, callback) {
    let i = 0;
    const speed = 50;

    function typing() {
      if (i < text.length) {
        animatedTextElement.textContent += text.charAt(i);
        i++;
        setTimeout(typing, speed);
      } else if (callback) {
        setTimeout(callback, 1000);
      }
    }

    typing();
  }

  function deleteText(callback) {
    let i = animatedTextElement.textContent.length;
    const speed = 30;

    function deleting() {
      if (i > 0) {
        animatedTextElement.textContent = animatedTextElement.textContent.substring(0, i - 1);
        i--;
        setTimeout(deleting, speed);
      } else if (callback) {
        setTimeout(callback, 500);
      }
    }

    deleting();
  }

  function cycleTexts() {
    typeWriter(texts[index], () => {
      deleteText(() => {
        index = (index + 1) % texts.length;
        cycleTexts();
      });
    });
  }

  cycleTexts();

  // Smooth scrolling for a specific section
  const videoSection = document.querySelector('.specific-section');
  if (videoSection) {
    const videoLink = document.querySelector('.scroll-to-section');
    if (videoLink) {
      videoLink.addEventListener('click', (event) => {
        event.preventDefault();
        videoSection.scrollIntoView({
          behavior: 'smooth'
        });
      });
    }
  }

  // Form validation
  function validateForm(event) {
    const name = document.getElementById("name").value.trim();
    const email = document.getElementById("email").value.trim();
    const message = document.getElementById("message").value.trim();

    if (name === "" || email === "" || message === "") {
      alert("Please fill in all the required fields.");
      event.preventDefault(); // Prevent form submission if validation fails
      return false;
    }

    return true;
  }

  const form = document.getElementById("formId");
  if (form) {
    form.addEventListener("submit", validateForm);
  }

  // Hamburger menu toggle
  const hamburgerMenu = document.querySelector('.hamburger-menu');
  const navMenu = document.querySelector('.nav-menu');

  console.log('Hamburger menu:', hamburgerMenu);
  console.log('Nav menu:', navMenu);

  if (hamburgerMenu && navMenu) {
    hamburgerMenu.addEventListener('click', () => {
      navMenu.classList.toggle('active');
    });
  }
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/RohanNathHERE/EvoGenomics/styles.css">
<!-- about.html -->

<!-- Navigation Bar -->
<header>
  <div class="nav-container">
    <div class="logo">
      <a href="index.html">
        <img src="images/logos/logo.png" alt="Logo">
      </a>
    </div>
    <nav class="nav-menu">
      <a href="about.html">About</a>
      <a href="research.html">Research</a>
      <a href="blog.html">Blog</a>
      <a href="publications.html">Publications</a>
    </nav>
    <div class="hamburger-menu">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</header>

I used smooth scrolling on the Research page to navigate to a specific section containing a YouTube video. When the user clicks a designated link, the page scrolls smoothly to the video section, enhancing the user experience.

On the Contact page, I implemented form validation to ensure all required fields—name, email, and message—are filled in before submission. This prevents incomplete submissions and ensures users provide the necessary information.

styles.css (Containing the CSS script for my entire portfolio)

CSS file

What I've Tried:

Verified that the external JavaScript file is linked correctly on all pages (scripts.js is loaded).
The HTML structure for the navigation bar is the same on both index.html and about.html.
Checked for JavaScript errors in the console on about.html – no errors are shown.
The JavaScript works on index.html but not on other pages.

My Expected Behavior:

I want the hamburger menu to toggle the .nav-menu on and off when clicked, across all pages, not just on the homepage (index.html).

What Could Be Causing the Issue?

Could it be related to how I'm referencing the JavaScript or HTML structure across pages?
Is there an issue with the JavaScript being loaded on other pages?

Any help or insights would be appreciated! Thanks in advance!

Solution

The call to typeWriter at line 49 raises an exception (animatedTextElement is null and you're trying to access a member) and kills the thread. The thread never reach the point of executing hamburgerMenu specific code. You have several options.

Comment out cycleText (this will make about.html work, but you'll lose the typewriter effect on index.html)
Test for null before calling cycleText
Separate concerns. Make several files and include only the JS that the page needs to function.

*Edit *

On a somewhat related note on not working, your navbar does not close when the burgermenu button loses focus. I don't know if that's intended.

And this is more a personal note, you could save yourself a couple of lines of code if you used the Client-side Validation API. Simply add required to your inputs and that'll do the trick. Add type="email" to your email input, that one handles most invalid forms of emails. The cool thing about it, is that it's uniform across clients and it's localized. The unfortunate part is, that it uses the clients user style, so you have no control over styling. An example can be found here. All inputs must be filled and most of them have some sort of range requirement.