Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

269
Views
Event.target.dataset returning undefined javascript

I am getting some issues while trying to get the data attribute of any html element.

The problem is i am getting the data attribute in 30% of the cases. The rest is returning undefined.

Here's what i want to trigger:

document.addEventListener("DOMContentLoaded",() => {
    document.body.addEventListener("click",(e) => {
        console.log("clicked");
        console.log(e.target.dataset.link + " is the link clicked") // this is returning undefined most of the times.
        if (e.target.dataset.link !== undefined) {
            console.log("got the link")
            navigateTo(e.target.dataset.link);
        }
    })

    // router();
})
<div class="cell" data-link="/dashboard/posts" tabindex="1">
    <i class="material-icons">assignment</i>
    <span>Posts</span>
 </div>

How is this even possible ?

And how can i prevent this ?

I can't remove the onclick event listener for the body.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

event.target is the element the event was targeted at, which may be inside your data-link element (like the i and span in your div). You can use the closest method with an attribute presence selector ([attribute-name]) to find the data-link element:

const dataElement = e.target.closest("[data-link]");

That checks e.target to see if it matches the CSS selector and, if it doesn't, looks to its parent to see if it matches, and so on until it reaches the document root. If it gets all the way to the root without finding it, it returns null.

Updated Snippet:

document.addEventListener("DOMContentLoaded",() => {
    document.body.addEventListener("click",(e) => {
        const dataElement = e.target.closest("[data-link]");
        if (!dataElement) {
            return; // There wasn't one
        }
        console.log(dataElement.dataset.link + " is the link clicked") // this is returning undefined most of the times.
        if (dataElement.dataset.link !== undefined) {
            console.log("got the link")
            // navigateTo(dataElement.dataset.link);
        }
    })

    // router();
})
<div class="cell" data-link="/dashboard/posts" tabindex="1">
    <i class="material-icons">assignment</i>
    <span>Posts</span>
 </div>


However, please note evolutionxbox's comment. You're recreating basic web functionality using non-semantic elements and JavaScript code. That destroys the accessibility of your page, and even for users who don't rely on assistive technology, it makes it impossible for them to use the advanced features of their browser to (say) open the link in a new tab, etc.

about 4 years ago · Juan Pablo Isaza Report

0

You attach the event listener to the document body. Is absolutely normal that you don't get the dataset: you can click out of the cell, or in a element into this.

You need attach the event to the desired elements with the data-link attribute:

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll('[data-link]').forEach(node => {
    node.addEventListener("click", (e) => {
        console.log("clicked");
        console.log(node.dataset.link + " is the link clicked")
    })
  })
})
<div class="cell" data-link="/dashboard/posts">
    <i class="material-icons">assignment</i>
    <span>Posts</span>
 </div>
 

<div class="cell">
    <i class="material-icons">assignment</i>
    <span>Posts</span>
 </div>
 

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!