Dataset Roster

Read custom data-* attributes with dataset.

Team roster

Click a card to inspect its data. Filter with the buttons below.

Ava

Guard

Jordan

Forward

Mia

Guard

Noah

Center

Leo

Forward

Click a player card.

Showing all players.

Filters

Important HTML

data-jersey-number becomes dataset.jerseyNumber. Values from dataset are always strings.

<article
  class="roster-card"
  data-name="Ava"
  data-position="Guard"
  data-points="22"
  data-jersey-number="7"
>
  <h3>Ava</h3>
  <p>Guard</p>
</article>

Important JavaScript

data-jersey-number becomes dataset.jerseyNumber. All values are strings.

const name = card.dataset.name;
const position = card.dataset.position;
const points = card.dataset.points;
const jerseyNumber = card.dataset.jerseyNumber;
const pointsAttr = card.getAttribute("data-points");