html - Get an attribute from the clicked element with Javascript - Stack Overflow

admin管理员组

文章数量:1291041

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

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

• javascript
• html
• events
• onclick

Share Improve this question Follow asked Nov 17, 2019 at 23:59 AlbertoAlberto 12.9k33 gold badges2727 silver badges6565 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>

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.

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>

本文标签： htmlGet an attribute from the clicked element with JavascriptStack Overflow