无法获取/未定义

Question

我试图将过渡添加到我的网站，所有 a> 标签都与过渡完美配合，但是当我添加这个 js 时，有时会告诉我这个错误： Cannot GET /pages/undefined

然后，当我尝试在同一个 html 中打开同一个 link 时，可以正常工作。我已经确保所有 link 都完美匹配，问题是 js 有时找不到 link，因为它是未定义的。这是所有代码：

HTML:

<body>
    
      <div class="transition transition-1 active"></div>
    
        <div class="header">
            <nav>
              <a href="../index.html">
                <span class="main-text">Phibik</span>
              </a>
              </button>
              <div class="main-nav">
                <ul id="menu">
                  <li>
                    <a href="inicio.html"><i class="fas fa-home"></i>Inicio</a>
                  </li>
                  <li>
                    <a href="games.html"><i class="fas fa-gamepad"></i>Games</a>
                  </li>
                  <li>
                    <a href="edits.html"><i class="fas fa-edit"></i>Edits</a>
                  </li>
                  <li>
                    <a href="random.html"><i class="fas fa-random"></i>Random</a>
                  </li>
                  <li>
                    <a href="about.html"><i class="fas fa-user"></i>About</a>
                  </li>
                </ul>
                <div id="hamburger" onclick="myFunction(this)">
                  <div class="bar1"></div>
                  <div class="bar2"></div>
                  <div class="bar3"></div>
                </div>
              </div>
            </nav>

CSS:

.transition-1 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: -100%;
  width: 100%;
  z-index: 100;
  background-color: #202020;
  pointer-events: none;
  transition: 0.5s ease-out;
}

.transition-1.active {
  left: 0;
  pointer-events: all;
}

JS:

function myFunction(x) {
  x.classList.toggle("change");
}

const hamburger = document.getElementById("hamburger");
const navUL = document.getElementById("menu");

hamburger.addEventListener("click", () => {
  navUL.classList.toggle("show");
});

window.onload = () => {
  const transition_el = document.querySelector(".transition");
  const anchors = document.querySelectorAll("a");

  setTimeout(() => {
    transition_el.classList.remove("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("active");

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

Answer 1

let target = e.target.href; 为您提供被单击元素的 href。

<a href="random.html"><i class="fas fa-random"></i>Random</a>

如果有人点击您的 link 内的斜体内容，那么它不会有 href 属性，所以您会得到 undefined。

currentTarget 将为您提供事件处理程序绑定到的元素。

无法获取/未定义

Cannot get / undefined

html

javascript

css

undefined