How to get 'aria-label' attribute of tag when contains child elements using javascript

Question

I am trying to read 'aria-label' attribute of an anchor tag . But i am getting null value since my code reads child element(<use></use>) rather than parent element(<a></a>). Below is my HTML and js code.

HTML

var inputs = document.querySelectorAll("a");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("click", function(e) {
    console.log(inputs[i].getAttribute("aria-label"));
  });
}

<a href="#" role="menuitem" id="main-6" aria-haspopup="true" aria-label="Choose your country site">
  <svg class="header-redirect--icon-w">
     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-country"></use>
  </svg>
  <i class="i-globe-w"></i>
</a>

Have you tried `this.getAttribute("aria-label")`? – Satpal Sep 11 '17 at 12:42 — Satpal, Sep 11 '17 at 12:42

score 10 · Accepted Answer · answered Sep 11 '17 at 12:46

Check this one, you need to refer this inside click event callback

var inputs = document.querySelectorAll("a");
console.log(inputs.length);
for(var i = 0; i < inputs.length; i++){
    inputs[i].addEventListener("click", function(e){
        console.log(this.getAttribute("aria-label"));
    });     
}

<a href="#" role="menuitem" id="main-6" aria-haspopup="true" aria-label="Choose your country site">
    <svg class="header-redirect--icon-w">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-country"></use>
    </svg>
    <i class="i-globe-w"></i>
    test
</a>

How to get 'aria-label' attribute of tag when contains child elements using javascript

1 Answers1