无法获取未定义答案

【问题标题】：cannot GET undefined无法获取未定义
【发布时间】：2021-04-21 03:23:54
【问题描述】：

您好，我正在使用 HTML CSS 和 JavaScript 开发自己的作品集，并添加了一些过渡动画。一切正常，直到我单击另一个超链接，过渡运行良好，但之后我的页面变为空白并显示以下错误：'cannot GET undefined'。

index.html：只是一个带有一些超链接的简单主页，我的 CSS 和 JavaScript 链接正确。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="transitions.css">
    <title>Document</title>
</head>
<body>

        <div class="transition transition-1 is-active"></div>

        <section>

            <ul>
                <li><a href="/"><span>HOME</span></a></li>
                <li><a href="about.html"><span>ABOUT</span></a></li>
                <li><a href="contact.html"><span>CONTACT</span></a></li>
                <li><a href=""><span>GITHUB</span></a></li>
            </ul>


            <h1>Mateo Ghidini | Web Developer</h1>
        </section>
    

  <script src="main.js"></script>  

</body>

transitions.css：

.transition-1{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 101;
    background-color: var(--dark);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease-out;
}

.transition-1.is-active{
    opacity:1;
    pointer-events: all;
}


.transition-2{
    position:fixed;
    top:0;
    left:-100%;
    width:100%;
    bottom:0;
    z-index: 101;
    background-color: var(--dark);
    
    pointer-events: none;
    transition: 0.5s ease-out;
}

.transition-2.is-active{
    left:0px;
}


.transition-3{
    position:fixed;
    top:100%;
    left:0;
    right:0;
    height:100%;
    z-index: 101;
    background-color: var(--dark);
    
    pointer-events: none;
    transition: 0.5s ease-out;
}

.transition-3.is-active{
    top:0px;
}

main.js：

window.onload=() =>{
    
    const transition_el = document.querySelector('.transition');
    const anchors = document.querySelectorAll('a'); 
    setTimeout(()=>{
        transition_el.classList.remove('is-active');
    }, 500);

    for(let i = 0; i<anchors.length; i++){
        const anchor = anchors[i];

        anchor.addEventListener('click', e =>{
            e.preventDefault();
            let target = e.target.href;

            transition_el.classList.add('is-active');

            setTimeout(()=>{
                window.location.href = target;
            },500);
        });
    }
}

我希望有人可以帮助解决这个问题，因为我不知道这个错误。

【问题讨论】：

“显示以下错误...”在哪里？浏览器控制台？在页面本身？
@Phil 感谢您的评论，错误显示在浏览器中，转换后页面变为空白并出现错误。例如，我通过单击超链接转到 localhost:8000/about.html，而不是让我的 html 带有样式，我有一个带有错误的空白页面
在这种情况下听起来像是来自您的 HTTP 服务器的错误。检查您的日志以了解端口 8000 上运行的任何内容
不是端口，只是一个例子。我在 visua studio @Phil 中使用实时服务器运行一个简单的 html
我从来没有说过这是端口，我说过要检查日志以了解该端口上运行的任何内容

标签： javascript html css get undefined

【解决方案1】：

问题是e.target.href中的目标是<span>标签而不是<a>标签，后者没有href。

从链接内部删除跨度将起作用，例如使用currentTarget 而不是target。

anchor.addEventListener('click', e => {
  e.preventDefault();
  let target = e.currentTarget.href;
  // etc...
});

【讨论】：

【解决方案2】：

事件参数的正确属性应该是

e.currentTarget.href

main.js

window.onload = () => {
  const transition_el = document.querySelector(".transition");
  const anchors = document.querySelectorAll("a");
  setTimeout(() => {
    transition_el.classList.remove("is-active");
  }, 500);

  for (let i = 0; i < anchors.length; i++) {
    const anchor = anchors[i];
    anchor.addEventListener("click", (e) => {
      e.preventDefault();
      let target = e.currentTarget.href;

      transition_el.classList.add("is-active");

      setTimeout(() => {
        window.location.href = target;
      }, 500);
    });
  }
};

【讨论】：