Not getting href attribute when clicking on <a> in JavaScript

April 11, 2022

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

HMTL CODE:

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

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

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.

>Solution :

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>