Question

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.childNodes[a];
var node = b.style.display;
var lastnode = 0;

while (node !== "none") {
    (lastnode++);
    (a++);
}
(lastnode++);
var c = lastnode;
var therightnode = elem.childNodes[c];
return therightnode;
}

function addRemoveClass(option) {

var elem = document.getElementById('formtbody');

if (option === "add") {
    nextChild().style.display = "";
} else if (option === "remove") { 
    elem.lastChild.style.display = "none";
    elem.lastChild.form.reset();
}
}

I execute with addRemoveClass("add") and addRemoveClass('remove')

But when I try to add, it goes unresponsive. I think it’s getting stuck in an infinite loop but I can’t tell.

I’ve tried JS Lint but it didn’t find anything either.

What I’m trying to do with this script is find the first child node of formtbody with the style="display:none;" attribute and make it visible.

Answer 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:

<ul id="container">
    <li class="show">First item</li>
    <li class="hide">Second item</li>
    <li class="show">Third item</li>
    <li class="show">Fourth item</li>
    <li class="show">Fifth item</li>
</ul>
<br><br>
<div id="result"></div>

CSS:

.hide {display: none;}

Javascript (run after page is loaded):

function findFirstDisplayNoneChild(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/

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