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?

Answer 1

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

Answer 2

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