javascript pass element from one function to another

Question

this is a partial code:

function readXmlUsingXPath(i,guid, xpath) {
    var xmlDoc = loadXML("gameFeed.aspx?guid=" + guid);
    if (xmlDoc == null) { document.getElementById(guid).innerHTML = "UPDATING"; return }
    else { };
    i.innerHTML = xmlDoc.selectNodes(xpath)[0].text;
}

window.onload = function () {
    for (var i = 0; i < document.getElementsByTagName('jackpot').length; i++) {
        var guid = document.getElementsByTagName('jackpot')[i].getAttribute('data-g').split('|')[0];
        var xpath = document.getElementsByTagName('jackpot')[i].getAttribute('data-g').split('|')[1];
        readXmlUsingXPath(document.getElementsByTagName('jackpot')[i],guid, xpath);
    }
}

basicly, what i want to do is pass the element from the onload function, to the readXmlUsingXpath function, so i could change it. but i get an unknown runtime error...

as asked, some sample html:

<li>
<a href="/gamepath/"><span>gameTitle</span>
<span><jackpot data-g="<%=game.Guid %>|<%=game.GamingProperties.JackpotFeedXpath %>">UPDATING . . .</jackpot></span>
</a>
</li>

Answer 1

Well, first of all, yes - cache the results of getElementsByTagName() and .getAttribute('data-g').split('|') into a variable:

var myDataG = MyJackpotElement.getAttribute('data-g').split('|');

Then instead of processing XPath that comes from your HTML source code, since you pass the guid to a server side script anyway, make the server script process the item (with XPath) on the server side - so it would get the xpath expression from the item you're loading by Guid :)

Make the server side script return you the value you're looking for ( gameFeed.aspx?guid= ), not the XML that you will further process on the client side to find the value.

Answer 2

Does the code work after refactoring it as per Denis's suggestions?

One big problem with the way you kept performing a getElementsByTagName, even aside from the huge performance hit, is that if the collection changes for any reason, the length might not be correct anymore, and you could be requesting element 9 where only 8 exist.

Also, it's possible that changing the innerHTML of an element will throw the browser off.

Side nit: I've renamed the i parameter of the readXmlUsingXPath function to jackpot , which seems a little more appropriate than just i .

function readXmlUsingXPath(jackpot, guid, xpath) {
    var xmlDoc = loadXML("gameFeed.aspx?guid=" + guid);
    if (xmlDoc == null) {
        document.getElementById(guid).innerHTML = "UPDATING"; 
        return;
    }
    var firstNode = xmlDoc.selectNodes(xpath).item(0);
    jackpot.innerHTML = firstNode.text;
}

window.onload = function () {
    var jackpots = document.getElementsByTagName('jackpot');
    for (var i = 0; i < jackpots.length; i++) {
        var data = jackpots[i].getAttribute('data-g').split('|'),
        guid = data[0],
        xpath = data[1];
        readXmlUsingXPath(jackpots[i], guid, xpath);
    }
}

Answer 3

ok, so i modified the code a bit, and made it simpler.

now it works as its supposed to.

function loadXMLDoc(guid,xpath,i) {

    var xmlhttp;
    if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}
    else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.async = true;
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            i.innerHTML = xmlhttp.responseXML.selectNodes(xpath)[0].text;
        }
    }
    xmlhttp.open("GET", "gameFeed.aspx?guid=" + guid, true);
    xmlhttp.send();
}

var tags = document.getElementsByTagName("pre");
for (var i = 0; i < tags.length; i++) {
    var data = tags[i].getAttribute('data-g').split('|'), guid = data[0], xpath = data[1];
    loadXMLDoc(guid,xpath,tags[i]);
}