getAttribute from each
with pure Javascript

Question

I am trying to get the value of each list items data- with pure JS.

const meetTheTeamSectionNames = document.querySelectorAll('.team__names li');

Array.from(meetTheTeamSectionNames).forEach(name => {
  name.addEventListener('click', function(e) {
    const nameMe = e.target.getAttribute('name')
    console.log(nameMe);
  });
});

<ul class="team__names">
  <li class="current" data-name="neil">Neil Tully MW</li>
  <li data-name="kevin">Kevin Rylands</li>
  <li data-name="jane">Jane Coggins</li>
  <li data-name="ben">Ben Green</li>
</ul>

For some reason each click returns null... and I have no idea why. Any help would be awesome :)

`getAttribute('name')` — That isn't the name of your attribute! — Quentin, Jan 12 '18 at 14:37
`li` elements are not designed to be interactive controls. Screen readers won't list them as things the user can interact with. Pressing tab to loop through the interactive elements on the page will skip them. Put ` — Quentin, Jan 12 '18 at 14:39
oh man.....sorry guys that was a real obvious one, should of picked up on it :S — Matthew Ellis, Jan 12 '18 at 14:43

Mihai Alexandru-Ionut · Accepted Answer · 2018-01-12T14:52:08.573

Just replace

const nameMe = e.target.getAttribute('name')

with

const nameMe = e.target.getAttribute('data-name')

Perhaps you confused with jQuery because there we have two posibilities to get value

$(selector).attr('data-name');
$(selector).data('name');, (if you use newer jQuery >= 1.4.3)

const meetTheTeamSectionNames = document.querySelectorAll('.team__names li');
    Array.from(meetTheTeamSectionNames).forEach(name => {
        name.addEventListener('click', function(e) {
            const nameMe = e.target.getAttribute('data-name')
            console.log(nameMe);
        });
    });

<ul class="team__names">
    <li class="current" data-name="neil">Neil Tully MW</li>
    <li data-name="kevin">Kevin Rylands</li>
    <li data-name="jane">Jane Coggins</li>
    <li data-name="ben">Ben Green</li>
</ul>

getAttribute from each with pure Javascript

1 Answers1

getAttribute from each
with pure Javascript