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?

How are you running Javascript on sites that you're visiting? Are you trying to write a browser extension? — Barmar
– Barmar, Commented Dec 26, 2013 at 3:47
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. — zweed4u
– zweed4u, Commented Dec 26, 2013 at 3:53

Andy Novocin · Accepted Answer · 2013-12-26 04:07:07Z

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');

Raunak Kathuria · Accepted Answer · 2013-12-26 05:17:41Z

1

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/

edited Dec 26, 2013 at 5:17

answered Dec 26, 2013 at 4:07

Raunak Kathuria

3,2351 gold badge20 silver badges27 bronze badges

2 Comments

zweed4u Over a year ago

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 Over a year ago

updated the answer to attach click event on every box class and on click assign its value to selected value

Collectives™ on Stack Overflow

Javascript - selecting and .click()

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related