JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<ul>
<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
</ul>

JavaScript

// Data Attribute

var user = document.getElementsByTagName("li")[0];
var pos = 0, span = user.getElementsByTagName("span")[0];
var phrases = [
    {name: "city", prefix: "I am from "},
    {name: "food", prefix: "I like to eat "},
    {name: "lang", prefix: "I like to program in "}
];

user.addEventListener("click", function(){
    var phrase = phrases[pos++];
    // Use the .dataset property
    span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
    //OR span.innerHTML = phrase.prefix + user.getAttribute("data-" + phrase.name);
}, false);