Get the value of element using javascript by its class name

Question

hi everyone I have an element like this :

<div class="price-box">
     <span class="regular-price" id="product-price-27">
        <span class="price">
           ...
        </span>
      </span>

 </div>

<input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" />

i have tried to get the value using this line

document.getElementByClassName('input-text qty').value="myvalue"

but that didn't work

how can I get the value without jquery? note : I've included prototype.js in my project !

what about this one too :

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>

I want to disable it using Javascript and by its class name !!!?

Sampson · Accepted Answer · 2014-03-24 15:26:01Z

9

You might be looking for querySelector:

document.querySelector( ".input-text.qty" );

This returns a single item, rather than a NodeList. If you would like a NodeList instead, use the alternative querySelectorAll. Keep in mind that these methods take CSS Selectors. The selectors you can use are limited to the browser this code is executed in. Keep it simple.

These two methods have better browser support than getElementsByClassName, so I would encourage you to use them instead of taking your current approach.

Demo:

enter image description here

edited Mar 24, 2014 at 15:26

answered Mar 24, 2014 at 14:22

Sampson

269k76 gold badges546 silver badges570 bronze badges

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

9 Comments

Souf Over a year ago

i used it and in console it says TypeError: Qty is null

Sampson Over a year ago

@Souf It works: jsfiddle.net/w9XN7/4. Make sure that your selector is written properly.

Souf Over a year ago

var addToCartButton = document.querySelector(".button .btn-cart");

Sampson Over a year ago

@Souf Don't add a space; in CSS selectors the space means .btn-cart is inside .button. If the two are both on the same element, you remove the space and make it .button.btn-cart.

kstubs Over a year ago

I'm more curious about the animation demonstration playing out here then of the question itself!

|

Walter · Accepted Answer · 2014-03-24 16:36:33Z

1

Since you are using Prototype in the page already, you may find this element using the "double-dollar" method:

$$('.input-text.qty');

As others have pointed out above, this returns an array of matched elements (or an empty array, if you don't have anything on the page that matches). So the easiest way to do anything to the result is with invoke():

$$('.input-text.qty').invoke('setValue', 'myvalue');

or

$$('.input-text.qty').invoke('disable');

Any of the Prototype Element methods can be invoked in this manner. If you want to do something custom to the element(s) based on some attribute, you can use each() instead:

$$('.input-text.qty').each(function(elm){
  if (elm.frobber == 'froom') elm.remove();
});

answered Mar 24, 2014 at 16:36

Walter

1,1505 silver badges8 bronze badges

1 Comment

Geek Num 88 Over a year ago

the OP needs to get the value, hence doing $$('.input-text.qty')[0].value would get that - but +1 for extra $$() info

tymeJV · Accepted Answer · 2014-03-24 14:22:03Z

0

Firstly, its getElementsByClassName (elements is plural) -- this will return an array of elements that satisfy the condition. You must specify the index of the array to modify the element properties:

document.getElementsByClassName('input-text qty')[0].value="myvalue"

answered Mar 24, 2014 at 14:22

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

xdazz · Accepted Answer · 2014-03-24 14:24:00Z

0

You have id="qty" so forget class, just use

document.getElementById('qty').value = "myvalue";

Which is most efficient.

Other dom native methods like getElementsByClassName/TagName(note there are s after Element) returns an array like object NodeList.

You need to use index or loop to access it.

answered Mar 24, 2014 at 14:24

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

Farkhat Mikhalko · Accepted Answer · 2014-03-24 14:24:24Z

0

You error is that you using:

1) getElementByClassName instead of getElementsByClassName

2) getElementsByClassName returns array so you must get [0] element

So try this one:

var p = document.getElementsByClassName('input-text qty')
console.log(p[0])
p[0].value = "MyValue"

Demo

answered Mar 24, 2014 at 14:24

Farkhat Mikhalko

3,6653 gold badges27 silver badges39 bronze badges

Comments

Suman Bogati · Accepted Answer · 2014-03-24 14:27:22Z

0

getElementByClassName() returns the array of matched elements, so to acces the first element of array use 0 index like

document.getElementsByClassName('input-text qty')[0].value="myvalue";

Or

You can use the id(qty) from input tag, and put the value on this tag by getElementById() something like

<input  type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" />

document.getElementById('qty').value="myvalue";

edited Mar 24, 2014 at 14:27

answered Mar 24, 2014 at 14:22

Suman Bogati

6,3612 gold badges25 silver badges38 bronze badges

Collectives™ on Stack Overflow

Get the value of element using javascript by its class name

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related