Skip to content

Instantly share code, notes, and snippets.

@shubhamt619

shubhamt619/index.html

Created August 26, 2022 10:13
Show Gist options
  • Save shubhamt619/6b8b6768ffa6e8fa0ab29ad94eb3eff2 to your computer and use it in GitHub Desktop.
Save shubhamt619/6b8b6768ffa6e8fa0ab29ad94eb3eff2 to your computer and use it in GitHub Desktop.
Download ZIP
Using data attributes in vanilla JavaScript
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Attributes</title>
</head>
<body>
<ul id="students_list">
<li onclick="printAge(1)" data-id="1" data-age="13">Sam</li>
<li onclick="printAge(2)" data-id="2" data-age="14">John</li>
<li onclick="printAge(3)" data-id="3" data-age="18">Alice</li>
<li onclick="printAge(4)" data-id="4" data-age="13">Bob</li>
<li onclick="printAge(5)" data-id="5" data-age="12">Nikki</li>
</ul>
<script>
function printAge(studentId) {
// Get the <li> which is clicked
let studentListItem = document.querySelector(`[data-id="${studentId}"]`);
// Get the age from the data attribute 'age'
let age = studentListItem.dataset.age;
// Finally log it to console, Duh !
console.log('Age of the clicked student is ', age);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment