Not getting href attribute when clicking on in JavaScript

Question

The problem is that I am not getting the href of <a> when there is an element inside <a> tag :

CODE:

const $elems = document.querySelectorAll('.content-container a')
var elems = Array.from($elems)
elems.map(a => {
    a.onclick = (e) => {
        console.log(e.target.href)
        e.preventDefault()
        // If I press on <a> that has class name 'google', the code console.logs the href, but if I press on <a> that has class name 'vezani-tekst-holder flex-column', it console logs undefined!
    }
})

<main id="article" style="padding: 0px !important; margin: 0px !important;">
    <div class="container content-container" style="background-color: white; margin-top: 0px;">
        <div class="grid-right">
            <article class="big-part" id="article-part" style="padding: 0px !important; margin: 0px !important;">
                <div class="post-text-holder">
                    <div class="post-content post-content-holder">
                        
                        <!-- First  a tag, works fine -->
                        <a class='google' href='https://www.google.com'>Hello Google</a>

                        <!-- Second  a tag, gives undefined -->
                        <a href='https://www.facebook.com'
                            class='vezani-tekst-holder flex-column'>\n
                            <img src='https://www.someimage.jpg'>\n
                            <h3 class='pretitle text'>Text Header</h3>\n <h1 class='small-title'>Small text</h1>\n
                        </a>

                    </div>
                </div>
            </article>
        </div>
    </div>
</main>

If I press on <a> that has class name 'google', the code console.logs the href, but if I press on <a> that has class name 'vezani-tekst-holder flex-column', it console logs undefined!

I have also tried putting:

console.log(e.srcElement.attributes.href.textContent);

and

console.log(e.originalTarget.attributes.href.value);

I am a beginner when It comes to JS, so any help would be appreciated.

Does this answer your question? [Adding click event listener to elements with the same class](https://stackoverflow.com/questions/21700364/adding-click-event-listener-to-elements-with-the-same-class) — Liam, Apr 11 '22 at 13:21

score 3 · Answer 1 · answered Apr 11 '22 at 13:23

Event#target refers to the element that triggered the event. Which is the <img /> or <h1 /> or <h3 /> element in your case.

Try using Event#currentTarget to get the element that has the event listener registered.

const $elems = document.querySelectorAll('.content-container a')
var elems = Array.from($elems)
elems.forEach(a => {
    a.onclick = (e) => {
        console.log(e.currentTarget.href)
        e.preventDefault()
    }
})

score 1 · Accepted Answer · answered Apr 11 '22 at 13:26

Use the element against the event in the eventListener. Another remark, you dont need tu use map. You can use forEach aganis.

const $elems = document.querySelectorAll('.content-container a')
var elems = Array.from($elems)
elems.forEach(a => {
    a.onclick = (e) => {
        console.log(a.href)
        e.preventDefault()
        // If I press on <a> that has class name 'google', the code console.logs the href, but if I press on <a> that has class name 'vezani-tekst-holder flex-column', it console logs undefined!
    }
})

<main id="article" style="padding: 0px !important; margin: 0px !important;">
    <div class="container content-container" style="background-color: white; margin-top: 0px;">
        <div class="grid-right">
            <article class="big-part" id="article-part" style="padding: 0px !important; margin: 0px !important;">
                <div class="post-text-holder">
                    <div class="post-content post-content-holder">
                        
                        <!-- First  a tag, works fine -->
                        <a class='google' href='https://www.google.com'>Hello Google</a>

                        <!-- Second  a tag, gives undefined -->
                        <a href='https://www.facebook.com'
                            class='vezani-tekst-holder flex-column'>\n
                            <img src='https://www.someimage.jpg'>\n
                            <h3 class='pretitle text'>Text Header</h3>\n <h1 class='small-title'>Small text</h1>\n
                        </a>

                    </div>
                </div>
            </article>
        </div>
    </div>
</main>

Not getting href attribute when clicking on in JavaScript

2 Answers2