firefox - [object] has no properties

i am trying to make this function work with both ie and firefox, but i keep getting "has no properties" error in firefox.  it didnt like the "inner" variable until i added a line that concatinates a space to the end of it.  i dont know how to get it to work with the style lines at the end.

function addFilter() {
  var createbutton = true;
  var intext = document.getElementById('txtFilter').value;
  var objFil = document.getElementById('filterParent');
  for( i = 0; i < objFil.childNodes.length; i++ ) {
    if (objFil.childNodes[i].id == intext)
        createbutton = false;
  }
  if (createbutton)
    addFilterBtn(intext);
  var objDiv = document.getElementById('divParent');
  for( i = 0; i < objDiv.childNodes.length; i++ ) {
    var inner = objDiv.childNodes[i].innerHTML;
      inner += " ";                     <---------------------------------   error fix
      //alert(inner.indexOf(intext));
      if (inner.indexOf(intext) == -1) {
        var child = objDiv.childNodes[i].id;
        var childdiv = document.getElementById(child);
        childdiv.style.display = 'none';           <------------------------    error line
      }
  }
}


error:
childdiv has no properties.
LVL 22
WMIFAsked:
Who is Participating?
 
aescntConnect With a Mentor Commented:
"childNodes" lists all child nodes -- that means: text nodes, comments, elements, doctypes, attributes, everything. Your code gives you undefined because the childNodes[i] is stopping at a *text* child node or a *comment* child node, or any other node which otherwise can't have an ID. For instance:
      <div id="divParent2">the <i>quick</i> brown <span>fox</span> <b id="WHEE">jumps!</b></div>

This has 6 child nodes.

  1. "the " (text node) -- id is [undefined]
  2. <i> (element) -- id is ""
  3. " brown " (text node) -- id is [undefined]
  4. <span> (element) -- id is ""
  5. " " (text node) -- id is [undefined]
  6. <b> (element) -- id is "WHEE"

Looping with your loop on these will alert those values.

Btw, the same reason why Firefox will stumble on the code I gave.
      objDiv.childNodes[i].style.display = 'none';

Doing that on a non-element node (like a text node) will give an error in Firefox (which is the right behavior.)

It might be helpful to check on "nodeType", so you skip those that aren't elements. (elements have a nodeType of 3.) This means changing:
    for( i = 0; i < objDiv.childNodes.length; i++ ) {
to:
    for( i = 0; i < objDiv.childNodes.length; i++ )
       if (objDiv.childNodes[i].nodeType == 3) {
0
 
WMIFAuthor Commented:
oh, firefox version 1.5.0.8
0
 
jessegivyConnect With a Mentor DeveloperCommented:
HI WMIF,

Well first of all what I've gotta ask is if your sure that all your nodes have attributes within this divParent?  For instance a <br> has no properties, but could easily be a child node.  What I would reccomend is alerting the id of each element as you iterate through the loop and alert the child var which would tell you all the id's of the elements you are trying to access the style attribute.  In order to change the style it has to have a style attribute.

Another idea is to set the style object instead of setting the display itself like this:

childdiv.style="display:none;";

...seems rediculous I know but ce la vie, more likely that there's a problem with one of the elements you're referencing (i.e. it's got no style attributes)

~Jesse
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
WMIFAuthor Commented:
hmm, that is starting to make some sense now.  i had started working on this page in IE and wanted to make sure it would work with firefox as well.  when i ran another function that just alerted the childnodes, in IE it displayed just the first level of tags, but in firefox i was getting undefined's.  the weird thing though is that there is actually only one level of tags, but firefox was displaying 7 alerts:  [undefined], f1, [undefined], f2, [undefined], f3, [undefined]

im not sure where the undefined's were coming from.

<div id="divParent">
  <div id="f1">content for f1</div>
  <div id="f2">content for f2</div>
  <div id="f3">content for f3</div>
</div>
0
 
aescntCommented:
I'm not sure on jessegivy's suggestion of using .style = "" because .style is nto a string.
I didn't check your code thoroughly but my eyes stopped at these lines:

       var child = objDiv.childNodes[i].id;
       var childdiv = document.getElementById(child);
       childdiv.style.display = 'none';           <------------------------    error line

Seems like you can instead substitude these with:
      objDiv.childNodes[i].style.display = 'none';
0
 
WMIFAuthor Commented:
that is how i started out in IE, but firefox didnt like it.  i thought by spreading stuff out it would work, but it didnt.  i think the problem is with the undefined showing for a loop of the child objects of divParent.

var objDiv = document.getElementById('divParent');
for( i = 0; i < objDiv.childNodes.length; i++ ) {
  alert(document.getElementById(child).id);

[undefined], f1, [undefined], f2, [undefined], f3, [undefined]
0
 
WMIFAuthor Commented:
even this gets one [undefined] in the alert.

function loopDIVs() {
  var objDiv = document.getElementById('divParent2');
  for( i = 0; i < objDiv.childNodes.length; i++ ) {
    alert( objDiv.childNodes[i].id );
  }
}

<div id="divParent2">
</div>
0
 
WMIFAuthor Commented:
actually i was getting undefined still with a nodetype of 3.  the div tags were returning a nodetype of 1.  thanks for the help though guys.  i think this will get me going again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.