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

Solution 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:

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

Comments

[Souf]

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

[Sampson]

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

[Souf]

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

[Sampson]

@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.

[Souf]

setAtrribute worked but when i one enable it again it stays disable ??

[Sampson]

@Souf Not sure I understand; you can .removeAttribute( "disabled" ) to removed the boolean disabled attribute from the element. Alternatively, you could set the property to false too: found[0].disabled = false and that will re-enable it too.

[kstubs]

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

[Geek Num 88]

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

[Souf]

@JonathanSampson you saved my life :-)))

[Kyle]

wow, that gif was like a boss, I'm so dumb, I didn't know I could program using the console, that should be obvious to me xD

[Mujahid Bhoraniya]

@Sampson really very nice article. Big appreciate. also very helpful for me