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 style="background-color: white; margin-top: 0px;">
<div >
<article id="article-part" style="padding: 0px !important; margin: 0px !important;">
<div >
<div >
<!-- 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.
CodePudding user response:
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()
}
})
CodePudding user response:
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 style="background-color: white; margin-top: 0px;">
<div >
<article id="article-part" style="padding: 0px !important; margin: 0px !important;">
<div >
<div >
<!-- 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>