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

Question

我正在用javascript创建一个小的测验类型的应用程序。我的html结构看起来像这样。

<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>

我正在尝试使用自定义数据属性data-responseID来确定用户提供的答案。

程序启动时，使用querySelectorAll单击侦听器并在每个侦听器上附加标签来遍历标签。

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);

    });

});

这在Firefox和Chrome中效果很好，但在Edge中则不行。（我不关心IE 11）

defineWhereToSlide只是一个提供警报的函数。最终，它将被用来推动旋转木马前进。

我已经制作了一个有效的示例，如果您在其他浏览器中打开它，则可以看到该问题。

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

我不知道为什么会这样。

Answer 1

不要按索引引用属性（即使看起来应该起作用，但至少在DOM3之前，属性是无序的）。使用以下任何一种：element.getAttributeNode("data-responseID").valueelement.attributes["data-responseID"].valueelement.getAttribute("data-responseID")element.dataset.responseID

Answer 2

您可以使用该getAttribute()方法。取代这个const&nbsp;clickedResponse&nbsp;=&nbsp;element.attributes[2].value;对此const&nbsp;clickedResponse&nbsp;=&nbsp;element.getAttribute('data-responseID')