Javascript - selecting and .click()

Question

I'm trying to automate a click when visting a website. This is the HTML I'm looking at.

<div class="box_wrapper">
 <a id="itemcode_11094414" class="box">7.5</a>
 <a id="itemcode_11094415" class="box">8</a>
 <a id="itemcode_11094416" class="box">8.5</a>
</div>

when I select the size, say for instance size 8, the class= tag turns to "box active" like so,

<div class="box_wrapper">
 <a id="itemcode_11094414" class="box">7.5</a>
 <a id="itemcode_11094415" class="box active">8</a>
 <a id="itemcode_11094416" class="box">8.5</a>
</div>

How can I go loop through the class and select a desired size? Also, I was just tinkering around and noticed that I had a hard time simulating a click on the add to cart and other buttons. For the add to cart the HTML looks like this,

<div class="add_to_cart">
 <div class="add_to_cart_left">
 <img id="add_to_bag_btn" alt="Add To Bag" src="/images/add_to_bag.gif"></img> 
 <img id="add_to_bag_btn_processing" alt="" src="/images/add_to_bag_processing.gif"></img>
 </div>
</div>

Is this the correct chunk of HTML I should be looking at for a simulation of a click?

• Daedalus: Post your javascript.
• Barmar: How are you running Javascript on sites that you're visiting? Are you trying to write a browser extension?
• Andy Novocin: Are you free to use jQuery?
• zweed4u: I'm trying to run through either scriptish or even as far as writing an extension. I don't have a lot of experience with jQuery but I'd be excited to see how it can be implemented.
• Daedalus: @LJ-C Read this before using 'schools again: w3fools.com

Answer 1

Since it's Christmas and you sounded excited to see jQuery in action I created a fiddle for you. Here is a sample of what you (could) want using jQuery: http://jsfiddle.net/akkJ5/2/

The code for selecting sizes and twiddling active classes is as follows:

var selectedSize = '';
$(".box").click(function(){
 $(".box").removeClass('active');
 $(this).addClass('active');
 selectedSize = $(this).html();
 $("#messages").html(selectedSize +" was selected");
});

In it I create an event listener for clicks on all box class elements. Since only one should be active I remove the active class from all box class elements then add active to the clicked box. I save the innerHTML of the selected link as selectedSize, and write it to an element for display sake.

In terms of simulating a click on a button you could do something like this:

$(".add_to_cart").click(function(){
 alert('cart clicked'); 
});
$(".add_to_cart").trigger('click');

Answer 2

Updated

To attach event to all the classed you can do

var selectedvalue = ''; 
for(var i = 0; i < document.getElementsByClassName('box').length; i++ ) {
 var d = document.getElementsByClassName('box')[i];
 d.onclick = function (e) { 
 selectedvalue = this.text;
 this.className = this.className + " active";
 }
}

Check http://jsfiddle.net/raunakkathuria/Nv8t2/2/

---

To navigate through classes and add your class to the link that has same value

JS

var value = 8;
for(var i = 0; i < document.getElementsByClassName('box').length; i++ ) {
 var d = document.getElementsByClassName('box')[i];
 if(d.text == value) {
 d.className = d.className + " active";
 }
}

To simulate the click handler for the add to cart you can enclose them to

<a href="javascript:void(0)" onclick="myJsFunc();">
<img id="add_to_bag_btn" alt="Add To Bag" src="/images/add_to_bag.gif"></img>
</a>

If you want to send it some link update this href="javascript:void(0)" onclick="myJsFunc();" to href="your_link"

Check http://jsfiddle.net/raunakkathuria/Nv8t2/1/

• zweed4u: Thank you! This is really helpful and easily understood. But going over the code, this seems as though its just concatenating the string. I want to actually simulate a click because when I go to press the add to cart button, the proper size isn't selected.
• Raunak Kathuria: updated the answer to attach click event on every box class and on click assign its value to selected value