Javascript fails in chrome and firefox, works fine in IE

Question

I have this JavaScript code for my SharePoint forms which does not work in other browsers but Internet Explorer.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
<!--
// This is custom functionality that hides selected columns in the a list.

_spBodyOnLoadFunctionNames.push("hideFields");

//Sets Order By Display to True, Disables Priority Choices
function hideFields() {
   var control = findacontrol("Order ID");
   control.parentNode.parentNode.style.display="block";
   control = findacontrol("Priority");
   control.parentNode.parentNode.disabled="true";

  //call orderID
  orderID();
}

function findacontrol(FieldName) {
   var arr = document.getElementsByTagName("!");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
}

//Sets Order ID field to read only in edit form
function orderID() {
    //Set the Field to Read only and change its background colour
        $("input[title='Order ID']").attr("readonly","true").css('background-color','#F6F6F6');

    //call setFocus();
    setFocus();
    }

//Sets cursor Focus to NAPA users
function setFocus() {
    //set focus to NAPA user
    document.getElementById("ctl00_m_g_0537f4e9_69aa_409a_b5ed_15e3624efeab_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv").focus();
}

//end custom functionality-->
 </script>

Answer 1

I think there are two slightly dangerous things in your code, that could be the source of the problem:

a) document.getElementsByTagName("!"); Document.getElementsByTagName() is meant for getting a collection of HTML tags, e.g. getElementsByTagName("table") will give you all tables As "!" is not a HTML tag to be used for standard page content, just for some declarative directives like "" and comments "". It seems like your looking for sth. different (what is it actually?), so this could be the source of a problem. ... and what ever you're looking for needs to be still present in the HTML that arrives on the client side, of course.

b) With control.parentNode.parentNode. ... your expecting, that whatever result you get from findacontrol has at least grandparents. If not you're running into an error which is not caught. You might want to check if the necessary conditions are met before accessing an object, or at least (always) catch possible errors and make them appear in an error message.

So much for the specific parts. In general: I agree with Mike (see his answer), that getting a component by its ID, i.e. via document.getElementById() is typically preferrable, as you know exactly what you get.

Answer 2

If you can, use var pn=getElementById('parent_of_comments'), then enumerate it's children like:

var children = pn.childNodes;  
for (var i = 0; i < children.length;
i++)  ...
 children[i]