How to handle multiple form pages with dojo.style?

Question

I am using dojo 1.6 and trying to handle form pages with the following code :

dojo.forEach(dojo.query(".form-page"), function(page, i){
    if(page.id == "form-part1"){
        dojo.style(page, "display", "block");
    }else{
        dojo.style(page, "display", "none");
    }
 });

 dojo.query(".nextPgButton").connect("onclick", function(){
      var pages = dojo.query(".form-page");
      dojo.forEach(pages, function (page, i){
          if(dojo.style(page, "display") != "none"){
               dojo.style(page, "display", "none");
               dojo.style(page[i+1], "display", "block");
           }
      });
 });

The first statement works as only the first page is diplayed as expected. But the second doesn't retrieve the current style of the page correctly. So when I click on my next page button, all pages are hidden.

dojo.style(page,"display") // always return "block"

Can someone tell me why dojo.style doesn't retrieve the actual style of my page ?

Many thanks

Answer 1

You're doing some really weird stuff there.

Your last line with page[i+1] will actually never work since page is not an array. I suppose you probably meant pages[i+1].

If you actually meant what I just said, then it's common sense that it will return block. Just consider the case where you have two .form-page elements. When clicking your button the following happens:

First iteration: Your first element with ID #form-part1 has display: block because you set it that way initially. This obviously means the if() statement inside the forEach() is being executed since it's not equal to "none".

This means that it sets the style of #form-part1 to display: none, but it also means it sets the next element CSS to display: block.

Second iteration: Your second .form-page now has display: block (read the last sentence of the previous iteration). This means the if() is also executed, setting the style back to display: none.

It will also try to find the next page, but there are no other pages anymore so it will also throw an error (another fault in your code).

---

So you obviously have to recheck your code since you're doing some thing(s) wrong. You will also have to rephrase your question because right now it's unclear what you're actually trying to achieve. But to me it makes sense that if you're having 2 pages, the if() statement is always being executed.