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: