Как мне console.log атрибут в выпадающем меню?

Question

Я пытаюсь console.log атрибута 'data-id', но я получаю 1 в консоли, когда нажимаю на новый '.dropdown-item'. Это фрагмент из HTML:

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  {% for date in joined_dates %}
    <a class="dropdown-item" href="#" data-id="{{loop.index}}">{{date}}</a>
  {% endfor %}
</div>

Это фрагмент из javascript:

d3.json('/data', function(error, closure_data) {
  var btn = d3.selectAll('.dropdown-item')
  btn.forEach(function(value, index) {
    value = btn.attr('data-id')
    btn.on('click', function() {
      d3.select('#text').text('1')
      console.log(value)
    })
  })
})

Answer 1

Благодаря @altocumulus я нашел довольно простое решение, и вот оно:

d3.selectAll('.dropdown-item').on("click", function() { d3.select('#text').text('1'); console.log(this.dataset.id); })

Поясняю, что data-id является подмножеством data- классов и его значением можно вызвать с помощью .dataset.id. Насколько я понимаю, мы можем поставить практически все, что угодно, после data- при создании класса, и все равно получить тот же результат.

Если у кого-то есть лучшее объяснение, пожалуйста, дайте мне знать! Спасибо!