无法获取 undefined

Question

您好，我正在使用 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);
        });
    }
}

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

Answer 1

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

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);
    });
  }
};

Answer 2

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

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

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

无法获取 undefined

cannot GET undefined

html

javascript

css

get

undefined