javascript function - variables passed into function work for IE, but not Firefox

Question

below is a java script function and the html for the clicked item that calls this function. I was able to tell by using alerts that the four values passed into the function are undefined when using firefox, but work when using IE. Please let me know if anyone sees the mistake and how to pass these values in correctly. Thank you.

            function LoadChild(lnEntityID, lnEntityCat, FullExpand, EquipID) {

            document.getElementById('dropTypes').disabled = false;
            document.getElementById('dropTypes').style.background = "white";
            DescStatus = 0;

            alert('lnEntityCat : ' + lnEntityCat);
            if (lnEntityCat == 0) {

                alert('First if is hit');
                PageMethods.LoadChild(lnEntityID, lnEntityCat, GLOBALEQUIPID, FullExpand, 0, 0, 1, LoadChildCallback);

            }
            else if (document.getElementById('img' + lnEntityID + lnEntityCat).canExpand == "true") {
                if (document.getElementById('div' + lnEntityID + lnEntityCat).style.display == 'none') {
                    document.getElementById('div' + lnEntityID + lnEntityCat).style.display = 'block';
                    document.getElementById('img' + lnEntityID + lnEntityCat).src = "../images/minus.gif"

                    PageMethods.LoadChild(lnEntityID, lnEntityCat, GLOBALEQUIPID, FullExpand, 0, 0, 1, LoadChildCallback);

                }
                else {
                    document.getElementById('div' + lnEntityID + lnEntityCat).style.display = 'none';
                    document.getElementById('img' + lnEntityID + lnEntityCat).src = "../images/plus.gif"
                }
            }
        }

Here is the dynamic html which is generated by server side code which generates the item which when clicked,calls loadChild

<img canExpand="true" style="cursor:hand" id="img72635" src="../images/plus.gif" EntityID="726" EntityCat="35" onclick="LoadChild(this.EntityID, this.EntityCat, 0, this.lnEquip);">

Answer 1

You're relying on non-standard attributes on the element being reflected as properties on the element object. You can't reliably, um, rely on that; you need to use getAttribute instead:

onclick="LoadChild(this.getAttribute('EntityID'), this.getAttribute('EntityCat'), 0, this.getAttribute('lnEquip'));">

(Not quite sure where lnEquip was coming from, I don't see it in the attributes on the element; if you're adding it as an expando elsewhere, then remove the getAttribute call from that particular one.)

---

Note that using non-standard attributes means your HTML will not validate . You can do this in a conforming way, now, by prefixing those attributes with data- as described in the HTML5 specification . Though that remains invalid in HTML4 and earlier, it works in all browsers, and becomes valid as of HTML5.