Using HTML5 data tag with JQuery

1

Working on my Simon Says project and I’m running into some issues with storing the user’s clicks in an array.

I’m trying to use HTML5’s data attribute to give each Simon Says button a value associated with like this:

    <div id="green" class="button" data=1></div>
    <div id="red" class="button" data=2></div>
    <div id="yellow" class="button" data=3></div>
    <div id="blue" class="button" data=4></div>

I declared a variable called playerMoves. I am attempting to store the clicks in the playerMoves array like this :

function storeClicks(){
   $('.button').each(function(elem) {
     $(this).click(function(e) {
      playerMoves.push($(this).val());
      console.log(playerMoves);
        // Player has made their moves, validate their moves
        //validate(playerMoves);
      });
    });
  }

When I open the Firefox dev tools and go to the console it outputs something this :

simon
simon970×346 24.9 KB

Each time one of the divs that represent a Simon Says button is clicked it adds to the array like it should, but instead of displaying the HTML data (i.e. a 1 for the green button, 2 for the red button, etc) it just shows an empty string.

What am I doing wrong?

2
3

Hey. Thing is data-attributes need an attribute and you can get their value with the .attr() method. Basically, your HTML should be:

  <div id="green" class="button" data-color="1"></div>
  <div id="red" class="button"  data-color="2"></div>
  <div id="yellow" class="button"  data-color="3"></div>
  <div id="blue" class="button"  data-color="4"></div>

and your JS:

playerMoves.push($(this).attr('data-color'));
2 Likes
4

Thanks. That did the trick.

5

That’s true in the sense that nonstandard attributes aren’t valid according to the HTML spec, but nonstandard attributes can still be accessed with JS:

<div
  id="myDiv"
  data-properDataAttribute="myVal"
  data="myInvalidVal"
  someOtherNonstandardAttr="someOtherVal"
></div>

$('#myDiv').attr('data-properDataAttribute');
// "myVal"
$('#myDiv').attr('data');
// "myInvalidVal"
$('#myDiv').attr('someOtherNonstandardAttr');
// "someOtherVal"

There’s also jQuery’s .data() method:

$('#myDiv').data();
// {properDataAttribute: "myVal"}
$('#myDiv').data('properDataAttribute');
// "myVal"

Either way, .val() will just return an empty string, because #myDiv doesn’t have a value attribute:

$('#myDiv').val();
// ""
1 Like
6

Totally forgot about the .data() method, thanks for the addition!

7

To be honest, I didn’t know about its existence either until a couple of Google searches ago!

The curious thing is, like many jQuery methods, it can be used as either a getter or a setter, but when used as a setter, it doesn’t actually add the corresponding data-* attribute to the element (but it does allow you to access it through the corresponding getter method).

$('#myDiv').data('newData', 'newVal');
// nothing happens to `#myDiv` in the DOM, but...
$('#myDiv').data();
// now returns {properDataAttribute: "myVal", newData: "newVal"}

Now that’s what I call a textbook example of vendor lock-in! :laughing:

8

Yeah, I’ve seen it often used to store data on a cloned element and retrieve it later. You can also store larger objects in it, like:

$('#div').data( "testObj", { key1: "val1", key2: "val2" } );