My Browser Goes Unresponsive When I Try To Execute This Js

I use this code to add or remove certain nodes from a page I have on my site: function nextChild() { var elem = document.getElementById('formtbody'); var a = 0; var b = elem.child

Solution 1:

This code is an infinite loop if node !== "none" when the loop starts:

while (node !== "none") {
    (lastnode++);
    (a++);
}

Nothing in the loop changes the value of node so once the loop starts, it will never stop.

Also, this syntax is odd and not required:

(lastnode++);

Remove the parens so it's just:

lastnode++;

Using the jQuery library (which makes cross browser DOM manipulation sooo much easier), here's some code to find the first item in a list that is set to display: none.

Here's a working version: http://jsfiddle.net/jfriend00/Um95a/

and the code:

HTML:

<ulid="container"><liclass="show">First item</li><liclass="hide">Second item</li><liclass="show">Third item</li><liclass="show">Fourth item</li><liclass="show">Fifth item</li></ul><br><br><divid="result"></div>

CSS:

.hide {display: none;}

Javascript (run after page is loaded):

functionfindFirstDisplayNoneChild(parent) {
    var result = null;
    $("#" + parent + " li").each(function() {
        if ($(this).css("display") == "none") {
            result = this;
            return(false);    // break out of each() function
        }
    });
    return(result);
}

var hidden = findFirstDisplayNoneChild("container");
if (hidden) {
    $("#result").html("Hidden Element: '" + hidden.innerHTML + "'");
} else {
    $("#result").html("No hidden elements found");
}

Or, any even simpler version of the code using the :hidden selector:

http://jsfiddle.net/jfriend00/Xsgmu/

functionfindFirstDisplayNoneChild(parent) {
    return($("#" + parent + " li:hidden").get(0));
}

Solution 2:

while (node !== "none") {
    (lastnode++);
    (a++);
}

is an infinite loop since the value of node does not change in the loop. If node !== "none" when the loop is reached it will never be equal to "none"

Solution 3:

functionnextHiddenChild(element) {
   var child = element.firstChild;
   while (child && child.style.display !== 'none') {
      child = child.nextSibling;
   }
   return child
}

functionaddRemoveClass(option) {
   var elem = document.getElementById('formtbody');

   if (option === "add") {
      elem = nextHiddenChild(elem);
      if (elem !== null) {
         elem.style.display = '';
      }
   } elseif (option === "remove") { 
      elem.lastChild.style.display = 'none';
      elem.lastChild.form.reset();
   }
}

But I recommend you use a library like jQuery. Seriously, you're wasting time learning the nitty gritty of direct DOM manipulation. If you have a job to do besides academic learning the DOM inside and out, such as getting a site built, then go get jQuery or prototype or MooTools or any other library and use it. Later, if you have time, you can come back and see how it all works.

Also, addressing your questions about the variables a and b: they are just scalar values. They're not reference types, not objects. Just because you used a in an earlier statement to get a value out of an array doesn't somehow bind that array to a's updated value.

var arr = ['x', 'y', 'z'],
   a = 0,
   value;
value = arr[a];
alert(value); //'x'
a += 1;
alert(value); //notice value hasn't changed, and why should it? You haven't assigned anything to it since last time.value = arr[a];
alert(value); // now it's 'y'