Using queryselectorall with classes

Question

I have a line <div class="price-box price-final_price" data-role="priceBox" data-product-id="176"> in a large html file.

I need to store the value of product-id inside a variable, so that I can access it globally.

I'm tring to do it with

var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].data-product-id;

But it's not working. What am I doing wrong?

.data-product-id is invalid, - is the minus operator for js engine. Since you are using data-attribute, you can access it through element.dataset.productId — Kaiido
– Kaiido, Commented Jul 22, 2017 at 2:37

CumminUp07 · Accepted Answer · 2017-07-22 02:36:10Z

3

If you want to use pure javascript you can use the .getAttribute() method

var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].getAttribute('data-product-id');

if you want to use jquery, you can do this

var var_productid = $('div[data-role="priceBox"]').eq(0).attr('data-product-id');

answered Jul 22, 2017 at 2:36

CumminUp07

1,9781 gold badge11 silver badges22 bronze badges

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

Comments

brk · Accepted Answer · 2017-07-22 02:55:06Z

2

If you intend to use and retrieve data_attributes in javascript, you need to use dataset instead of only data. Also to get product-id, you need to use camel case

var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].dataset.productId;
console.log(var_productid)

<div class="price-box price-final_price" data-role="priceBox" data-product-id="176"></div>

edited Jul 22, 2017 at 2:55

answered Jul 22, 2017 at 2:49

brk

50.3k10 gold badges59 silver badges85 bronze badges

3 Comments

kashish Over a year ago

Thanks for the info.

kashish Over a year ago

In my question, its data-product-id. so, the camelcase will be dataProductId. Right?

brk Over a year ago

Nope. It will be dataset.productId.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element, either in HTML or in the DOM

knizer · Accepted Answer · 2017-07-22 02:36:43Z

0

var productId = $("div[data-role='priceBox']").attr('data-product-id');

answered Jul 22, 2017 at 2:36

knizer

1331 silver badge9 bronze badges

1 Comment

CumminUp07 Over a year ago

This doesn't address the need to get the first element

Haikel Fazzani · Accepted Answer · 2017-07-22 02:44:02Z

0

dataProductId = document.querySelectorAll("div")[0].getAttribute("data-roduct-id");

answered Jul 22, 2017 at 2:44

Haikel Fazzani

1,1112 gold badges9 silver badges15 bronze badges

Comments

KevBot · Accepted Answer · 2017-07-22 03:01:05Z

0

Use getAttribute
No need to use querySelectorAll if you only want the first item found, just use querySelector

Snippet:

var productid = document.querySelector('div[data-role="priceBox"]').getAttribute('data-product-id');

answered Jul 22, 2017 at 3:01

KevBot

19k5 gold badges54 silver badges71 bronze badges

Collectives™ on Stack Overflow

Using queryselectorall with classes

5 Answers 5

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related