почему element.attribute не работает в Edge? - PullRequest
Новая
       20

почему element.attribute не работает в Edge?

0 голосов
/ 18 апреля 2019

Я создаю небольшое приложение типа викторины в 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

Я не понимаю, почему это происходит.

* РЕДАКТИРОВАТЬ 1

Я только что понял, что порядок атрибутов другой. Если вы измените значение индекса на ...attributes[1]..., тогда оно будет работать нормально. Есть ли лучший способ сделать это вместо предоставления индекса?

Ответы [ 2 ]

2 голосов
/ 18 апреля 2019

Не ссылаться на атрибуты по индексу (даже если кажется, что он должен работать, атрибуты были неупорядочены , по крайней мере, до DOM3).Используйте любое из:

2 голосов
/ 18 апреля 2019

Вы можете использовать метод getAttribute().

замените 

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

на 

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