Javascript - On click, check if element has an attribute with value

Question

The button

I want to get it to work with an event listener like this one:

document.body.addEventListener('click', function(e) {
console.log(e.target);
    if (e.target.hasAttribute('data-a-target="popout-chat-button"')) {
            console.log('popout button');
    }
});

<button data-a-target="popout-chat-button" data-test-selector="popout-button">Popout</button>

I can't check the value with hasAttribute, what would be the best approach to do so.

What about [getAttribute()](https://www.w3schools.com/jsref/met_element_getattribute.asp) ? — bugs, Apr 21 '18 at 13:04

score 6 · Accepted Answer · answered Apr 21 '18 at 13:05

6

Use e.target.getAttribute to get the attribute value of the target element. Then compare that with the value of the attribute you expect in the if condition:

document.body.addEventListener('click', function(e){
    console.log(e.target);
    if(e.target.getAttribute('data-a-target') === "popout-chat-button"){
        console.log('popout button');
    }
});

<button data-a-target="popout-chat-button" data-test-selector="popout-button">Popout</button>

The getAttribute() method returns the value of the attribute with the specified name, of an element.

Syntax

element.getAttribute(attributename)

answered Apr 21 '18 at 13:05

Ankit Agarwal

30,378
5
37
62

Yea that's it. Thanks a lot. – oban_internet Apr 21 '18 at 13:08
@oban_internet: Because it's a `data-` attribute, modern browsers will let you do `e.target.dataset.aTarget == "..."` – Apr 21 '18 at 13:15
@CrazyTrain Thanks for telling me. Might be useful in the future. – oban_internet Apr 21 '18 at 13:28
@AnkitAgarwal Yea i wanted to mark it but i had to wait 9 minutes. – oban_internet Apr 21 '18 at 13:29

score 2 · Answer 2 · answered Apr 21 '18 at 13:15

You can use:

.dataset: The HTMLElement.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element, either in HTML or in the DOM. ...

Instead of:

e.target.hasAttribute('data-a-target="popout-chat-button"')

you can simply write:

e.target.dataset.aTarget == "popout-chat-button"

document.body.addEventListener('click', function(e){
  console.log(e.target.dataset.aTarget);

  if(e.target.dataset.aTarget == "popout-chat-button"){
      console.log('popout button');
  }
});

<button data-a-target="popout-chat-button" data-test-selector="popout-button">Popout</button>

score 1 · Answer 3 · answered Apr 21 '18 at 13:07

1

you can user getAttribute function. It returns the value of attribute if it exists otherwise return null.

if(e.target.getAttribute("data-a-target") === "popout-chat-button") {
     // attribute exists and value is equal to what you want...
}

answered Apr 21 '18 at 13:07

devmarkpro

153
4
13

Javascript - On click, check if element has an attribute with value

3 Answers3

Linked