无法获取未定义 - 编程之家

如何解决无法获取未定义

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

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

File "/usr/local/lib/python3.9/dist-packages/pyscreeze/__init__.py",line 476,in _screenshot_linux
im = Image.open(tmpFilename)
File "/usr/lib/python3/dist-packages/PIL/Image.py",line 2891,in open
fp = builtins.open(filename,"rb")
FileNotFoundError: [Errno 2] No such file or directory:

transitions.css:

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

main.js：

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

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

解决方法

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

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

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

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

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