CODEWITHSUNDEEP
google-chromesafarigetelementsbytagname
Shaoz
Shaoz

Reputation: 10653

getElementsByTagName not working in chrome and safari

I'm using the javascript method getElementsByTagName("a") to call all 'a' tags and do some effect with them. The method works in FF and Opera but not in Chrome and Safari. When I look in the debugging tools of Chrome and Safari they say: "Uncaught TypeError: Cannot call method 'getElementsByTagName' of null"

Why is that and what's the fix? Please can someone advise me on this?

Many Thanks in advance.

Here's the code:

function popUpSAPWindow(){
// Find all links in the page and put them into an array.
var linksInOrderLinesTable = document.getElementById("orderLinesTable").getElementsByTagName("a"); // The line doing the error
var linksLen = linksInOrderLinesTable.length;

// If the link text is 'SAP' then modify the attributes
for(var i = 0; i < linksLen; i++){
    if(linksInOrderLinesTable[i].innerHTML == "SAP"){
        // Store the 'href' value of each SAP link.
        var sapHref = linksInOrderLinesTable[i].href;

        // Modify the attributes of each SAP link.      
        linksInOrderLinesTable[i].setAttribute("href", "javascript:return false;");
        linksInOrderLinesTable[i].setAttribute("onclick", "sapNewWindow(\'" + sapHref + "\')");
    }
}

}

It works with this HTML:

<table id="orderLinesTable" summary="List of orders made by customers that the administrator can pick and deal with">
<tr>
    <th>Status</th>
    <th>Basket id</th>
    <th>Order line id</th>
    <th>Product</th>
    <th>Company</th>
    <th>Catalogue</th>
    <th>Date</th>
    <th>Details</th>
</tr>
<tr>
    <td>Accepted</td>
    <td>236569</td>
    <td>207</td>
    <td>OS Master Map</td>
    <td>NHS</td>
    <td>Standard</td>
    <td>1 Aug 10</td>
    <td><a href="/orderLineDetails.html">Normal</a> <a href="/orderLineDetails.html">SAP</a></td>
</tr>
<tr>
    <td>New</td>
    <td>236987</td>
    <td>528</td>
    <td>Code-Point</td>
    <td>BT</td>
    <td>Standard</td>
    <td>9 Aug 10</td>
    <td><a href="/orderLineDetails.html">Normal</a> <a href="/orderLineDetails.html">SAP</a></td>
</tr>

But when I'm on other pages it gives the error mentioned.

Upvotes: 4

Views: 18772

Answers (2)

Ivo Wetzel
Ivo Wetzel

Reputation: 46756

The problem is, that when you're calling document.getElementById("orderLinesTable").getElementsByTagName("a") on a page that does not have the orderLinesTable getElementById will return null. Therefore calling getElementsByTagName on null will yield an error.

This should solve the problem:

var orderLinesTable = document.getElementById("orderLinesTable");
var linksInOrderLinesTable = [];

if (orderLinesTable) { // only get the links when the table exists
    linksInOrderLinesTable = orderLinesTable.getElementsByTagName("a");
}

Upvotes: 3

meder omuraliev
meder omuraliev

Reputation: 186662

Safari and Chrome both support the method. The object you're using it on may not be consistently retrieved, so it evaluates to null. Check how you're grabbing the object you're calling it on.

BTW.. it's not a Javascript method, it's a method in the DOM API.

EDIT:

document.getElementById("orderLinesTable")

alert what this is. Is it null?

Upvotes: 1

Related Questions