个人作品集网站汉堡菜单仅在index.html生效，其他页面失效求助

我正在开发个人作品集网站，为移动端视图实现了汉堡菜单。该菜单在index.html页面运行完全正常，但在about.html、research.html等其他页面点击无反应。所有页面使用相同HTML结构，并引用同一个外部JavaScript文件scripts.js。

项目配置 #

共用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');
    });
  }
});

index.html（头部部分） #

<link rel="stylesheet" href="styles.css">

<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（头部部分） #

<link rel="stylesheet" href="styles.css">

<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>

已实现的其他功能 #

• Research页面：实现平滑滚动功能，点击指定链接可平滑滚动到包含YouTube视频的特定区域
• Contact页面：实现表单验证，确保提交前填写所有必填字段

已尝试的排查操作 #

• 验证所有页面均正确引用scripts.js
• 确认index.html与about.html导航栏结构一致
• 检查about.html控制台无JS错误
• 确认JS仅在index.html生效

预期行为 #

汉堡菜单在所有页面点击时均可切换.nav-menu的显示与隐藏

疑问 #

1. 是否与跨页面引用JS或HTML结构的方式有关？
2. JS在其他页面的加载是否存在问题？

内容的提问来源于stack exchange，提问作者Rohan Nath