cannot GET undefined

  css, html, javascript

Hi im developing my own porftolio with html css and js, and i added some transition animations. Everything works fine until i click on another hyperlink, where the transitions runs well but afterwards my page goes blank and it shows the following error: ‘cannot GET undefined’.

index.html: Just a simple home page with some hyperlinks, my css and js are linked correctly.

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

i hope someone could help to solve this issue, cause i have no knowledge about this error.

Source: Ask Javascript Questions

LEAVE A COMMENT