Question

I have a series of divs that I’ve hidden with css display:none;.

<div id="" class="hidden_row">some code</div>
<div id="" class="hidden_row">some code</div>
<div id="" class="hidden_row">some code</div>

I also have button with an onclick “addRow();” function that is designed to sequentially display one hidden row on each click by changing its css declaration to “display:block;”.
The javascript looks like this:

function addRow(){
    var hiddenrow = getElementsByClassName(document, "*", "hidden_row");

    for(var i=0; i< hiddenrow.length; i++){
        if(hiddenrow[i].style.display = "none"){
            hiddenrow[i].style.display = "block";
        }
    }
}

However, the function doesn’t change 1 member of the array on execution (which is what I’d like), it finds the hidden rows and displays them all. How can I tweak my function so that it works as intended?

Answer 1

you have a typo in your if statement

if(hiddenrow[i].style.display = "none"){

should be

if(hiddenrow[i].style.display == "none"){

EDIT:
note that .style.display only checks the inline style, so you’ll have to check for

if(hiddenrow[i].style.display != "block"){

instead, as this better supports what you want

and as Darhazer said, if you want to just show one at a time, you need to put a break; after you find the one you want.

Working JsFiddle: http://jsfiddle.net/STGhq/

and your revised function

function addRow(){
    var hiddenrow = document.getElementsByClassName("hidden_row");
    for(var i=0; i< hiddenrow.length; i++){
        if(hiddenrow[i].style.display != "block"){
            hiddenrow[i].style.display = "block";
            break;
        }
    }
}​

---

Addressing the issue that element.style only pulls the current inline style, I found this article that gets around it by using window.getComputedStyle or element.currentStyle, both of which pull in the current computed style, rather that just inline declarations.

Working jsFiddle with the new code
http://jsfiddle.net/STGhq/2/