link to another page not working for when i click on an img but works when i click on a text

Question

The problem is that when i click on the link (in this case an img) it doesn't link me to the "homepage.html" like I have put in my. however when I put it on a text such as

<a href="homepage.html"> text </a> instead and click on the 'text' the link works.

I've tried using other pictures, as well as changing the links, and each link (another HTML page) is in the same directory, so there's no need to move up/down a directory.

i have other pages and there seems to be no issue on the linking between pages but they all link through text, this is the only page where I link to other HTML pages through an image. it also doesn't work if I change the href="homepage.html" to a href="#" .

after isolating the problem I realised its a JS issue. I'm new to HTML CSS and JS so i would be extremely grateful for your help.

the error message received comes along as: "File not found The file "c:...\undefined" cannot be found. It may have been moved, edited, or deleted.' why would it search into...\undefined when I linked it to "homepage.html?

this is the relevant HTML code

<a href="homepage.html">
    <div class="logo-bar"> 
        
        <img class="logo" src="..."> </img>
            
    </div>
</a>

this is the relevant JS code

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

    setTimeout(() => {  
        transition_el.classList.remove('is-active');
    },400);


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

relevant CSS code (for the transition between pages):

.transition-1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgb(24, 24, 24);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease-in-out;
    
}

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

Answer 1

I probed your js code and realized the error is from this line:

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

You should check if the variable containing selected element isn't empty first, then try to remove the class. Try this:

if(typeof transition_el != 'undefined'){
  transition_el.classList.remove("is-active");
}

Answer 2

The problem is with text inside of an anchor, it works as the anchor is what is being clicked and your handler works.

But with an image inside of the anchor, it is actually the image being clicked, you are handling the event as it bubbles up to the anchor. The event has both a target and currentTarget properties. The target being the originally clicked element, and the currentTarget being the element your event handler is attached to, handling the event, which maybe some parent as it bubbles up the tree.

So just use currentTarget instead of target and it should work for you in either case.

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

setTimeout(() => {  
    transition_el.classList.remove('is-active');
},400);


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

    anchor.addEventListener('click', e => {
        e.preventDefault();
        // currentTarget to get the anchor in the case where the target is an image
        let target = e.currentTarget.href;
        
        transition_el.classList.add('is-active');
        
        setTimeout(() => {
            window.location.href= target;
        },400);
    });
}

Answer 3

 <a href="homepage.html"> <div class="logo-bar"> <img class="logo" src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg" width='100px' height="100px"/> </div> </a>