Data attributes in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a custom data attribute named user-id with value 123 to the div element.

HTML

<div [1]="123">User Info</div>

Drag options to blanks, or click blank then click option'

Aid-user

Buser-id

Cdata-user-id

Ddataid

Attempts:

3 left

💡 Hint

Common Mistakes

Using attribute names without the data- prefix.

Using invalid attribute names like user-id without data-.

Custom data attributes in HTML start with data-. So to create a data attribute named user-id, you write data-user-id.

2fill in blank

medium

Complete the code to access the data-role attribute value from the button element using JavaScript.

HTML

const btn = document.querySelector('button');
const role = btn.[1];

Drag options to blanks, or click blank then click option'

Adataset['role']

Bdataset.role

CgetAttribute('role')

DgetAttribute('data-role')

Attempts:

3 left

💡 Hint

Common Mistakes

Using getAttribute('role') which misses the data- prefix.

Trying to access dataset.role without knowing it returns a string, not a method.

To get a data attribute value using getAttribute, you must use the full attribute name including data-. So getAttribute('data-role') returns the value.

3fill in blank

hard

Fix the error in the JavaScript code to correctly read the data-index attribute from the element.

HTML

const item = document.querySelector('.item');
const index = item.dataset.[1];

Drag options to blanks, or click blank then click option'

Aindex

Bdata-index

CIndex

DdataIndex

Attempts:

3 left

💡 Hint

Common Mistakes

Using dataset.data-index which is invalid syntax.

Using incorrect casing like dataset.Index.

When accessing data attributes via dataset, the attribute name drops the data- prefix and uses camelCase. So data-index becomes index.

4fill in blank

hard

Fill both blanks to create a span element with a data-status attribute set to active and access it in JavaScript.

HTML

<span [1]="active">Status</span>
<script>
  const statusSpan = document.querySelector('span');
  const status = statusSpan.dataset.[2];
</script>

Drag options to blanks, or click blank then click option'

Adata-status

Bstatus

CdataStatus

Dstatus-active

Attempts:

3 left

💡 Hint

Common Mistakes

Using dataStatus in HTML which is invalid.

Accessing dataset.dataStatus instead of dataset.status.

The HTML attribute must be data-status. In JavaScript, access it as dataset.status (without data- and camelCase).

5fill in blank

hard

Fill all three blanks to create a button with a data-action attribute set to save, then read and log it in JavaScript.

HTML

<button [1]="save">Save</button>
<script>
  const btn = document.querySelector('button');
  const action = btn.dataset.[2];
  console.log([3]);
</script>

Drag options to blanks, or click blank then click option'

Adata-action

Baction

Dbtn.dataset.action

Attempts:

3 left

💡 Hint

Common Mistakes

Using dataAction instead of data-action in HTML.

Logging action instead of btn.dataset.action.

The HTML attribute is data-action. In JavaScript, access it as dataset.action. To log the value, use btn.dataset.action.