Get an attribute from the clicked element with Javascript

Question

Goal: get the data-element from the button that is been clicked.

My current code:

Array.from(document.getElementsByClassName('my_buttons_class')).forEach((button) => {
     button.addEventListener('click', (e)=>{
           e.preventDefault();
           /*
                Here i want to get the 'data-element' from the clicked button
                something like 
                e.target.attr('data-element');
           */
     })
});

The button element is something like this:

<button class="my_buttons_class" data-element="some json">My button text</button>

Current problem: the listener works fine, but the e.target is just the HTML text of that element, so i can't use .attr() on it

Also already tried e.target['data-element'] but it return undefined

Mamun · Accepted Answer · 2019-11-18 00:07:14Z

5

.attr() is a jQuery method, In vanilla JavaScript you have to use getAttribute() to access the attribute:

e.target.getAttribute('data-element');

Array.from(document.getElementsByClassName('my_buttons_class')).forEach((button) => {
  button.addEventListener('click', (e)=>{
    e.preventDefault();
    console.log(e.target.getAttribute('data-element'));        
  });
});

<button class="my_buttons_class" data-element="some json">My button text</button>

edited Nov 18, 2019 at 0:07

answered Nov 18, 2019 at 0:00

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bobble bubble Over a year ago

Wonderful, was looking exactly for this, thank you! :)

CertainPerformance · Accepted Answer · 2019-11-18 00:01:04Z

2

The button variable refers to the button being iterated over, so to access the data-element attribute of that element, use:

button.dataset.element

or, with getAttribute:

button.getAttribute('data-element')

Elements do not automatically get their attributes assigned as properties of their Javascript references - that only works for a certain few attribute types, like id, class, and name, which is why e.target['data-element'] didn't work.

answered Nov 18, 2019 at 0:01

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

2 Comments

Alberto Over a year ago

element should be "data-element"? but in js i can't use "-" in elements name

CertainPerformance Over a year ago

An attribute of data-SOMETHINGHERE can be accessed via <element>.dataset.SOMETHINGHERE. There's no need to use bracket notation - accessing the dataset is enough.

Blue · Accepted Answer · 2019-11-18 00:02:47Z

2

Try using getAttribute:

Array.from(document.getElementsByClassName('my_buttons_class')).forEach((button) => {
     button.addEventListener('click', (e)=>{
           e.preventDefault();
           console.log(e.target.getAttribute('data-element'));
     })
});

<button class="my_buttons_class" data-element="some json">My button text</button>

answered Nov 18, 2019 at 0:02

Blue

23k7 gold badges69 silver badges102 bronze badges

Collectives™ on Stack Overflow

Get an attribute from the clicked element with Javascript

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related