How to get link inside div and click it using js

Question

I am trying to write a function for an extension that can find a link inside a specific div and click it. The link has no id or class name, so I was looking for something similar to a CSS selector but with JS without using '$' or 'jQuery' since that will require me to embed a jquery library with the extension.

The div has a class name and then a link inside, so this is the code I have so far --

function COut() {
  var a = document.getElementsByClassName('bottom_row').getElementsByTagName('a');
  for (var i = 0; i < a.length; i++) {
    var elem = a[i],
    elem.click();
  }
}

This the markup for the div and link -

<div class="bottom_row">
                <a onclick="miniAddToCart.closeMiniAddToCart({cmConversionEvent: 'Checkout'})" href="http://www.domain.com/shoppingcart/default.cfm?checkout=1&amp;"><img src="http://www.domain.com/images/eb/minicart/checkout.gif" alt="Checkout"></a>
            </div>

Any ideas what Im doing wrong?

If you do not want to use jQuery, why would you tag it jQuery? — epascarello, Dec 13 '13 at 05:23
@epascarello I want to use jquery but I have to avoid using things like $() or jquery() in my code mark up cause it will cause issues unless i download and package the jquery library with the extension, which isnt ideal. — user3089477, Dec 13 '13 at 05:33
Are you trying to trigger an onclick event or make the link actually navigate away? — epascarello, Dec 13 '13 at 05:36
Im trying to actually click the link and navigate to the url in the href — user3089477, Dec 13 '13 at 05:40
@thealfreds I dont want to go through all of the links, only the one link in that specific div. Its the only link in that div and I dont have a way of adding a id or class to the tag, so I have to use the div class name to target the link. — user3089477, Dec 13 '13 at 05:50
Since I know this is for a Chrome Extension and from my experience on the various similar questions popping up lately, I want to point out that in many pages as the one you target the interaction with a form is less straightforward than you might think. E.g. you may think you just need to set the value of an input field and click a link, but in order for this to work you might need to set the values of some hidden fields, change some elements' classes, setting special `data-*` attributes etc. — gkalpak, Dec 13 '13 at 06:32

score 0 · Answer 1 · edited May 23 '17 at 11:49

getElementsByClassName('bottom_row').getElementsByTagName('a');

getElementsByClassName returns a set, not a single item

getElementsByClassName('bottom_row')[0].getElementsByTagName('a');   
                                    ^^^

If there can be more than one item with the className, than you will need to loop. And if you support modern day browsers, you can look into querySelectorAll

And finally clicking on a link is not as easy as calling click()

How can I simulate a click to an anchor tag?

If you want it to do to the url, you might be better off just setting window.location.href

score 0 · Answer 2 · answered Dec 13 '13 at 10:24

0

If there is a single A tag, I won't prefer to make loop for that. Instead you can just do it like:

function COut() {
  var a = document.getElementsByClassName('bottom_row')[0].getElementsByTagName('a')[0];
  if(a){
    a.click();
  }
}

answered Dec 13 '13 at 10:24

Ashish Kumar

2,991
3
18
27

How to get link inside div and click it using js

2 Answers2