[es] - JS za next button

1boki1

Član broj: 330362
Poruke: 22
*.3gnet.mts.telekom.rs.

+7 Profil

^{25.08.2016. u 11:17 - pre 93 meseci}

Pravim stepenovanu formu.
Imam tri dela forme sa nazivima indexa: accountBox,profileBox i inputsBox.
Moja ideja je da klik na dugme next zameni vrednost svojstva display i na taj nacin zameni prikazani deo fore.
Ne znam backend tehnologije(php,java i sl) i nije mi bitno da li bi ovo funkcionisalo.
Trenutno me zanima samo vizuelni izgled.

Code:

document.getElementById("next").onclick = nextForm; //na klik bi trebalo da se izvrsi funkcija nextForm
                                                                         //next je ime dugmeta next dugmeta
document.getElementById("accountBox").style.display = "block"; //ovaj red mislim da je nepotreban
    function nextForm() {
    var obrazci = ["accountBox","profileBox","inputsBox"]; //elementi nizova su nazivi indexa delova formi
        for (i = 0; i < 2; i++ ){ //znam da je bolje i < obrazci.length-1 ali ajde
            var k = i + 1;  //posto ima tri obrazca sa treceg obrazca ideja je da dugme next nema funkciju pa je i<2
            if (document.getElementById(obrazci[i]).style.display == "block" ){
                document.getElementById(obrazci[i]).style.display = "none";
                document.getElementById(obrazci[k]).style.display = "block";
            }
        }
    }

U css-sam definisao da profileBox i inputsBox imaju "none" vrednosti svojstva display dok account ima pocetnu vrednost "block".
Pitanje
U cemu je konkretan problem sto ova skripta sa prvog prebacuje na treci a ne na drugi deo.
Koja je dobra praksa za realizaciju next i previous dugmadi. ima li boljeg resenja za "kretanje" od uvecanja ili smanjenja indexa za 1.
Hvala unapred.

Odgovor na temu

dusans
Stojanov Dušan
Pančevo

Član broj: 9551
Poruke: 1343
*.dynamic.sbb.rs.

+311 Profil

Re: JS za next button

^{25.08.2016. u 11:55 - pre 93 meseci}

Ponaša se baš onako kako si opisao, zato što ti ne valja logika.
U prvoj iteraciji petlje prikaže drugi korak ali kasnije u drugoj iteraciji sakrije drugi a prikaže treći korak.
Dakle, stavi break; na kraju uslova i radiće.

Pošto već imaš samo 3 koraka, ne vidim potrebu da imaš petlju i komplikaciju,
prostije bi bilo da si uveo jednu promenljivu za index i napisao to ovako nekako:

Code (javascript):

var formIndex = 0;

document.getElementById("next").onclick = nextForm;

function nextForm() {

   formIndex = Math.min(++formIndex, 2);

   document.getElementById("accountBox").style.display = formIndex == 0 ? "block" : "none";

   document.getElementById("profileBox").style.display = formIndex == 1 ? "block" : "none";

   document.getElementById("inputsBox").style.display = formIndex == 2 ? "block" : "none";

}

Odgovor na temu