汉堡菜单仅适用于index.html，不适用于我的投资组合网站中的其他页面

问题描述 投票：0回答：1

我正在开发一个个人作品集网站，并实现了一个用于移动视图的汉堡菜单。汉堡菜单在我的 

index.html
页面上完美运行，但在 
about.html
或 
research.html
等任何其他页面上不起作用。

index.html 中的汉堡菜单按预期工作，但是当我导航到任何其他页面（例如，

about.html
）时，单击菜单不会执行任何操作。我对所有页面使用相同的 HTML 结构并链接到相同的外部 JavaScript 文件 (
scripts.js
)。

这是我的设置：

index.html（标题部分）

// 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（标题结构与index.html相同）

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

我在“研究”页面上使用平滑滚动来导航到包含 YouTube 视频的特定部分。当用户点击指定链接时，页面平滑滚动到视频部分，增强用户体验。

在“联系方式”页面上，我实施了表单验证，以确保在提交之前填写所有必填字段（姓名、电子邮件和消息）。这可以防止提交不完整并确保用户提供必要的信息。

styles.css（包含我整个作品集的 CSS 脚本）

CSS 文件

我尝试过的：

  1. 验证外部 JavaScript 文件在所有页面上都正确链接（
    scripts.js
    已加载）。
  2. 导航栏的 HTML 结构在 
    index.html
    和 
    about.html
    上是相同的。
  3. 在 
    about.html
    上的控制台中检查 JavaScript 错误 – 未显示错误。
  4. JavaScript 可以在 
    index.html
    上运行，但不能在其他页面上运行。

我的预期行为：

我希望汉堡菜单在单击时在所有页面上打开和关闭 .nav 菜单，而不仅仅是在主页上 (

index.html
)。

什么可能导致问题？

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

任何帮助或见解将不胜感激！预先感谢！

javascript html hamburger-menu
1个回答
0
投票

第 49 行对 

typeWriter
的调用引发异常（
animatedTextElement
是 
null
并且您正在尝试对其进行索引）并终止线程。线程永远不会达到执行 
hamburgerMenu
特定代码的程度。您有多种选择。

  • 评论一下
    cycleText
  • 致电 
    null
     之前测试
    cycleText
  • 单独的关注点。制作多个文件并仅包含页面运行所需的 JS。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.