El problema es que no obtengo el href de <a> cuando hay un elemento dentro de la etiqueta <a> :
CÓDIGO:
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> Si <a> que tiene el nombre de clase 'google', el código console.logs the href, pero si presiono <a> que tiene el nombre de clase 'vezani-tekst-holder flex-column', la consola registra undefined !
También he probado a poner:
console.log(e.srcElement.attributes.href.textContent);
y
console.log(e.originalTarget.attributes.href.value);
Soy un principiante cuando se trata de JS, por lo que agradecería cualquier ayuda.
Event#target se refiere al elemento que desencadenó el evento. Cuál es el elemento <img /> o <h1 /> o <h3 /> en su caso.
Intente usar Event#currentTarget para obtener el elemento que tiene registrado el detector de eventos.
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() } })Use el elemento contra el evento en eventListener. Otro comentario, no necesitas usar tu mapa. Puede usar 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>