How to access the data attribute value using data set

Question

http://jsfiddle.net/bald1/Su97P/2/

I dont know whats wrong with this code. I would like to click on the green div and by that click add "data-productName" to the "cart".

   var cart = []; 
var cartElement = document.getElementById("cart");



function addToCart(productName) {
   cart.push(productName); 
   cartElement.innerHTML = cart.join("<br>");  
}


var someDiv = document.getElementById("product");

someDiv.addEventListener("click", function() {
   var str = someDiv.dataset.productName; 

   addToCart(str); 

}, false);

PSL · Accepted Answer · 2013-11-15 15:41:38Z

3

Change it to productname, since the data attributes are lowercased in your case (camelcased in case of any more hyphens after the first one) and added to the dataset, you need to access it as productname instead of productName.

someDiv.addEventListener("click", function() {
   var str = someDiv.dataset.productname; 
   addToCart(str); 
}, false);

productName will work had your attribute been data-product-name.

See the documentation regarding the rules.

any dash (U+002D) is removed;
any letter following a dash (U+002D), before its removal, is set in its uppercase counterpart.

edited Nov 15, 2013 at 15:41

answered Nov 15, 2013 at 15:36

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user2915962 Over a year ago

Im sorry, change which part to productname?

PSL Over a year ago

@user2915962 see the casing... when you do someDiv.dataset.productname

user2915962 Over a year ago

I think i found it, took care of some old ones to =)

PSL Over a year ago

@user2915962 you can without duplicating the ids. provide them all a classname as product and use document.getElementsByClassName('product'), loop though them attach the handler and then inthe handler use this.dataset.productname

PSL Over a year ago

let us continue this discussion in chat

|

Collectives™ on Stack Overflow

How to access the data attribute value using data set

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related