How do I get the data attribute values from an array of selected objects

Question

My HTML has a some anchor tags with a data attribute as below:

<a href="#" class="color" data-colorValue="FF0000">Red</a>
<a href="#" class="color" data-colorValue="0000FF">Blue</a>
<a href="#" class="color" data-colorValue="00FF00">Green</a>

My JavaScript code needs to add a click event listener to each anchor tag. When the event is triggered, I need to get the color value. My code is below.

const colors = document.querySelectorAll('.color');

for(let i = 0; i < colors.length; i++){
  colors[i].addEventListener('click', () => {
    console.log('test to see if click is working');
    console.log(this.dataset.colorValue);
  });
}

I'm getting the error "Cannot read property 'colorValue' of undefined"

What is dataset? That's what's failing. The definition is not shown here. — Jake Worth
– Jake Worth, Commented Aug 23, 2019 at 16:01

Taki · Accepted Answer · 2019-08-23 16:02:20Z

2

use .getAttribute('data-colorValue');

const colors = document.querySelectorAll('.color').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    const color = el.getAttribute('data-colorValue');
    console.log(color);
  });
});

<a href="#" class="color" data-colorValue="FF0000">Red</a>
<a href="#" class="color" data-colorValue="0000FF">Blue</a>
<a href="#" class="color" data-colorValue="00FF00">Green</a>

answered Aug 23, 2019 at 16:02

Taki

17.7k5 gold badges28 silver badges48 bronze badges

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

1 Comment

Jun Dolor Over a year ago

Perfect! Exactly what I needed. Much obliged :-)

Andrea Crawford · Accepted Answer · 2019-08-23 16:06:05Z

1

If you change your data attribute to data-color-value, you should be able to retrieve it using this.dataset.colorValue

See more about data attribute naming rules here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

The name of a custom data attribute in HTML begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_) -- but NOT any ASCII capital letters (A to Z).

answered Aug 23, 2019 at 16:06

Andrea Crawford

3312 silver badges10 bronze badges

1 Comment

Jun Dolor Over a year ago

Yes, I was able to retrieve the data attribute using the dataset.colorValue. Much obliged :-)

Collectives™ on Stack Overflow

How do I get the data attribute values from an array of selected objects

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related