为什么element.attribute在Edge中不起作用？

Question

I'm creating a small quiz type application in javascript. My html structure looks like this.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary btn-insight" data-target="#myCarousel" data-responseID="1">
  <input type="radio" name="options" id="option1" autocomplete="off"> 
  <h5>1</h5> 
  <p class="mb-0">label for 1</p>
  <div class="line-bottom gradient-purple"></div>
</label>
...
</div>

I'm trying to use the custom data attribute data-responseID to determine what answer was provided by the user.

When the program starts, loop through the labels using querySelectorAll and attaching a click listener to each one.

const responseLables = document.querySelectorAll('div.btn-group-toggle > label');
responseLables.forEach(element => {
    element.addEventListener('click', function(e){
        const clickedResponse = element.attributes[2].value;
        determineWhereToSlide(clickedResponse);
    });
});

This works well in Firefox and Chrome, but doesn't in Edge. (I'm not concerned with IE 11)

determineWhereToSlide is just a function that gives an alert for now. Eventually it'll be used to push the carousel forward.

I've made a working example and you can see the issue if you open it up in different browser.

https://codepen.io/anon/pen/dLmQKZ?editors=1010

I don't get why this is happening.

*EDIT 1

I just realized that the order of the attributes are different. If you change the index value to ...attributes[1]... then it works just fine. Is there a better way to do this rather than providing an index?

Answer 1

You can use the getAttribute() method.

replace this

const clickedResponse = element.attributes[2].value;

to this

const clickedResponse = element.getAttribute('data-responseID')

Answer 2

Don't refer to attributes by index (even if it seems it should work, attributes were unordered at least until DOM3). Use any of:

• element.getAttributeNode("data-responseID").value
• element.attributes["data-responseID"].value
• element.getAttribute("data-responseID")
• element.dataset.responseID