Not able to extract "value" attribute from +/- box DOM element

Question

I want to extract the "value" attribute from the selection box which allows users to select the number of quantities of an particular item on my website.

I am a newbie to both Javascript and HTML. When I do an "Inspect Element" I can see the attribute in the element

<input size="2" type="text" autocomplete="off" class="cart_quantity_input form-control grey" value="2" name="quantity_8329349_28095_0_12035">

But when I try to do either of the following two, Google Tag Manager says the variable is undefined

document.querySelectorAll("input.cart_quantity_input.form-control.grey").value

OR

document.querySelectorAll("input.cart_quantity_input.form-control.grey").getAttribute("value")

The order transaction URL is www.decathlon.in/order

Answer 1

querySelectorAll returns a list of nodes. You need to either:

• retrieve the relevant element by index from the list:

  document.querySelectorAll("input.cart_quantity_input.form-control.grey")[0].value
  

• use querySelector to select only a single element:

  document.querySelector("input.cart_quantity_input.form-control.grey").value