I have a funky looking table on my webpage, here's an example:
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Product name</th>
<th>Product description</th>
<th>Price</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr style="height: 50px;">
<td>1</td>
<td>Mug</td>
<td>Perfect for drinking stuff</td>
<td>41</td>
<td><a href="/products/detail?id=1"><i class="glyphicon glyphicon-info-sign"></i></a></td>
</tr>
etc....
</body>
I'm currently in the middle of writing some crafty JavaScript code to grab hold of that 'a' tag and its link. Unfortunately, I can't just slap an id onto it for easy access so I've resorted to this method:
var btn = document.getElementsByTagName("tbody")[0].getElementsByTagName("a")[0];
console.log(btn.href);
But wouldn't you know it, I keep running into the same issue: btn is undefined.
Even though when I try to display the tbody element, it shows up as an object. So why isn't this working when trying to dig deeper into its child tags?
Just to throw it out there - this JavaScript snippet is being run within the window.onload function.