How to read data from "data" attribute with JavaScript

Question

I cannot seem to read the "data" attribute through JavaScript.

Using MDN documentation, I have set the data attribute in the form "data-ingID" and then I am trying to fetch that data using Javascript with the "querySelector".

My markup with data attribute is:

<li class="recipe__item data-ingID=${ingredient.ing_id}">
            <svg class="recipe__icon">
                <use href="img/icons.svg#icon-check"></use>
            </svg>

            <div class="recipe__count">${formatCount(ingredient.count)}</div>
            <div class="recipe__ingredient">
                <span class="recipe__unit">${ingredient.unit}</span>
                ${ingredient.ingredient}
            </div>
</li>

I am trying to read that data with this code:

console.log(document.querySelector('.recipe__icon').parentElement.dataset.ingID);

I am getting 'undefined' as the result even though I am seeing my ID attribute in the inspector.

Answer 1

Your data attribute must be lowercase, and most browsers will adjust it automatically, so you should refer to it with:

document.querySelector('.recipe__icon').parentElement.dataset.ingid

Per MDN (emphasis mine):

The name of a custom data attribute in HTML begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_) -- but NOT any ASCII capital letters (A to Z).

console.log(document.querySelector('.recipe__icon').parentElement.dataset.ingid);

<ul>
  <li class="recipe__item" data-ingID="${ingredient.ing_id}">
    <svg class="recipe__icon">
                <use href="img/icons.svg#icon-check"></use>
            </svg>

    <div class="recipe__count">${formatCount(ingredient.count)}</div>
    <div class="recipe__ingredient">
      <span class="recipe__unit">${ingredient.unit}</span> ${ingredient.ingredient}
    </div>
  </li>
</ul>