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 !!!?

Answer 1

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:

Answer 2

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();
});

Answer 3

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"

Answer 4

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.

Answer 5

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

Answer 6

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";