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

Forums jQuerylink to another page not working for when i click on an img but works when i click on a text
Staff asked 3 months ago

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

 

Answers (1)

Add Answer
Prince Dhameliya Marked As Accepted
Staff answered 3 months ago

The issue with text inside of an anchor is that it functions since the anchor is what gets clicked and your handler is activated.

However, when an image is contained within an anchor, the picture itself is what is clicked, and you are handling the event as it bubbles up to the anchor. Both a target and a currentTarget property are present in the event. The target is the element that was initially clicked, and the currentTarget is the element to which your event handler is linked. The event may be handled by a parent as it propagates up the tree.

 

Therefore, in either case, just substitute currentTarget for target, and it should work for you.

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

 

Subscribe

Select Categories