CODEWITHSUNDEEP
javascript
kjarsenal
kjarsenal

Reputation: 934

first member of array

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?

Upvotes: 0

Views: 118

Answers (4)

Freddie Feng
Freddie Feng

Reputation: 11

Hmm, did you mis-type '==' as '=' in the condition statement?

Upvotes: 1

Thomas Jones
Thomas Jones

Reputation: 4962

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/

Upvotes: 5

Benjamin Cox
Benjamin Cox

Reputation: 6120

If you only want this to apply to the first row, and only if it's display is "none", then don't loop. Instead, just use the first item in the array, like so:

if (hiddenrow.length > 0 && hiddenrow[i].style.display == "none"){
    hiddenrow[0].style.display = "block";
}

OTOH, if you just want to apply this to the first item with display = "none", regardless of whether it's the first item in the list, then do:

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

The break operator stops the loop from continuing.

Upvotes: 0

Maxim Krizhanovsky
Maxim Krizhanovsky

Reputation: 26699

First, correct your code, as you are assigning a value in the if, not checking the equality. Next, if you can break the loop, so only the first element, which display is "none" will be shown.

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

Upvotes: 1

Related Questions