[JS][HTML] bladeren middels divlayers - Softwareontwikkeling

zondag 13 juni 2004 04:11

Acties:

Topicstarter

[lichtelijke n00bvraag]
Ik heb een enqueteformulier van 33 vragen opgesteld en om niet na elke vraag de resultaten te hoeven doorsturen, wil ik elke vraag in een aparte layer zetten. Klikken op 'volgende' maakt de actieve layer onzichtbaar en de volgende zichtbaar.

Ik heb in dit topic gekeken, maar kwam er niet echt uit. Ik wil namelijk automatisch de actieve layer uitschakelen en in het genoemde topic gaat het over parallel openen en sluiten van layers.

Onderstaande code (welke een error geeft in IE6.0?) heb ik nu:

code:

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT type=text/javascript>
function switch(waarde)
{
  for (i=1; i<34; i++)
    {
    var vraag = "vraag_" + i;

    var status = "none";
        
    var status_switch = document.getElementById(waarde).style.display;

    if (vraag == waarde && status_switch == "none") status = "block";
    else status = "none";
         
    document.getElementById(vraag).style.display = status;
    }
}
</SCRIPT>

</HEAD>
<BODY>

<DIV STYLE="DISPLAY: block" ID=vraag_1>
vraag_1
<A HREF="javascript:switch('vraag_1');">&laquo;</A> <A HREF="javascript:switch('vraag_2');">&raquo;</A>
</DIV>

<DIV STYLE="DISPLAY: none" ID=vraag_2>
vraag_2
<A HREF="javascript:switch('vraag_2');">&laquo;</A> <A HREF="javascript:switch('vraag_3');">&raquo;</A>
</DIV>

<DIV STYLE="DISPLAY: none" ID=vraag_4>
vraag_3
<A HREF="javascript:switch('vraag_3');">&laquo;</A> <A HREF="javascript:switch('vraag_4');">&raquo;</A>
</DIV>

<DIV STYLE="DISPLAY: none" ID=vraag_5>
vraag_4
<A HREF="javascript:switch('vraag_4');">&laquo;</A> <A HREF="javascript:switch('vraag_5');">&raquo;</A>
</DIV>

<DIV STYLE="DISPLAY: none" ID=vraag_6>
vraag_5
<A HREF="javascript:switch('vraag_5');">&laquo;</A> <A HREF="javascript:switch('vraag_6');">&raquo;</A>
</DIV>

</BODY>
</HTML>

Welke (gruwelijke) fout heb ik begaan tijdens het (her)schrijven de JS?

zondag 13 juni 2004 04:37

Acties:

Verwijderd

Je laat je loop in de functie lopen t/m i=33 terwijl je maar 5 divjes in je body hebt staan...

Ik begrijp ook niet zo goed waarom je uberhaupt loopt over alle mogelijke divjes, je kunt toch gewoon alleen, wanneer er gevraagd wordt om vraag i te zien, de div met vraag i-1 (in geval van vooruitklikken) en i+1 (in geval van achteruitklikken) laten verdwijnen?

[ Voor 59% gewijzigd door Verwijderd op 13-06-2004 04:41 ]

zondag 13 juni 2004 04:47

Acties:

Galoptic

Topicstarter

Verwijderd schreef op 13 juni 2004 @ 04:37:
Je laat je loop in de functie lopen t/m i=33 terwijl je maar 5 divjes in je body hebt staan...

Dat heb ik effe gedaan omdat er straks 33 vragen = divjes zullen zijn. Daar komt die JS-error vandaan?

Ik begrijp ook niet zo goed waarom je uberhaupt loopt over alle mogelijke divjes, je kunt toch gewoon alleen, wanneer er gevraagd wordt om vraag i te zien, de div met vraag i-1 (in geval van vooruitklikken) en i+1 (in geval van achteruitklikken) laten verdwijnen?

Okay en dat is dus precies waar ik niet uit kom. Die loop draai ik om te kijken welke div er open staat en die moet dan dus dicht. Jouw oplossing is idd makkelijker, maar ik heb werkelijk geen idee hoe ik dat i-1 of i+1 voor elkaar krijg (ookal snap ik wat je bedoelt)...

zondag 13 juni 2004 04:59

Acties:

Verwijderd

Galoptic schreef op 13 juni 2004 @ 04:47:
[...]

Dat heb ik effe gedaan omdat er straks 33 vragen = divjes zullen zijn. Daar komt die JS-error vandaan?

[...]

Ja, dat lijkt mij ieg logisch, omdat je in die loop via getElementById(..) elementen (divjes met nummer >5) gaat aanspreken die helemaal niet aanwezig zijn.

Okay en dat is dus precies waar ik niet uit kom. Die loop draai ik om te kijken welke div er open staat en die moet dan dus dicht. Jouw oplossing is idd makkelijker, maar ik heb werkelijk geen idee hoe ik dat i-1 of i+1 voor elkaar krijg (ookal snap ik wat je bedoelt)...

Je krijgt via de klik op een link het verzoek van de gebruiker om een bepaalde vraag te zien, zeg vraag i (die als argument wordt meegegeven aan je functie). Dat betekent dat de gebruiker ofwel vanuit vraag i+1 op 'vorige vraag' heeft geklikt ofwel vanuit vraag i-1 op 'volgende vraag'. Dus kunnen er ook geen andere divjes zichtbaar zijn dan één van die twee. Daarom is het voldoende om van divje nummer i-1 en i+1 de status op niet zichtbaar te zetten en vervolgens de i-de wel zichtbaar te maken

.

Oh, trouwens, er is nog een dringendere reden waarom je script een foutmelding oplevert en dat is dat je functie "switch" heet, dit is een reserved word voor zover ik weet (er is nl. ook een control statement "switch").

Je zou zoiets kunnen proberen:

code:

function gaVraag(waarde,richting) {
    if(richting=="a") { //vorige vraag
        document.getElementById("vraag"+(i+1)).style.display="none";
    } else { //volgende vraag
        document.getElementById("vraag"+(i-1)).style.display="none";
    }
    document.getElementById("vraag"+i).style.display="block";
}

<body>

<div style="display:block" id="vraag1">
Vraag 1
<a href="javascript:gaVraag('2','v')">&laquo;</a>
</div>

<div style="display:none" id="vraag2">
Vraag 2
<a href="javascript:gaVraag('1','a')">&laquo;</a> <a href="javascript:gaVraag('3','v')">&raquo;</a>
</div>

<div style="display:none" id="vraag3">
Vraag 3
<a href="javascript:gaVraag('2','a')">&laquo;</a> <a href="javascript:gaVraag('4','v')">&raquo;</a>
</div>

.
.
.

</body>

Het kan nog wel wat efficiënter door de id van de div als het argument met de functie mee te geven, maar ik weet niet zo goed hoe dat moet, misschien iets met this.id of zo....

[ Voor 38% gewijzigd door Verwijderd op 13-06-2004 05:16 ]

zondag 13 juni 2004 15:46

Acties:

Galoptic

Topicstarter

Verwijderd schreef op 13 juni 2004 @ 04:59:
[...]

// Ik heb je bovenstaande code bekeken en die ziet er
// inderdaad een stuk logischer uit voor mijn probleemstellng.
// Hij 'werkt' echter niet: ik krijg geen foutmelding o.i.d. maar
// bij klikken op het volgende linkje, opent de volgende div niet.

code:

<SCRIPT type=text/javascript>
function gaVraag(waarde,richting)
  {
    if(richting=="a")
    { //vorige vraag
        document.getElementById("vraag"+(i+1)).style.display="none";
    }
    else
    { //volgende vraag
        document.getElementById("vraag"+(i-1)).style.display="none";
    }
    document.getElementById("vraag"+i).style.display="block";
  }
</SCRIPT>

Wat ik hierboven in de if-statement is een verwijzing naar 'waarde' die in de functie genoemd wordt. Dus waar zie ik de variabele voor '1' in javascript:gaVraag('1','a') terug in de code hierboven. Niet volgens mij, echter, waar moet ik 'm dan toevoegen?

[ Voor 50% gewijzigd door Galoptic op 14-06-2004 02:04 . Reden: extra toelichting ]

donderdag 17 juni 2004 23:32

Acties:

Verwijderd

code:

 <SCRIPT type=text/javascript>
function gaVraag(waarde,richting)
  {
    if(richting=='a')
    { //vorige vraag
        document.getElementById('vraag'+(waarde+1)).style.display='none';
    }
    else
    { //volgende vraag
        document.getElementById('vraag'+(waarde-1)).style.display='none';
    }

    document.getElementById('vraag'+waarde).style.display='block';
  }
</SCRIPT>

ik heb bovenstaande code even bijgewerkt. Maar deze regel hieronder werkt niet. Wat gaat er fout.

code:

1	<a href="javascript:gaVraag('1','a')">«</a> <a href="javascript:gaVraag('3','v')">»</a>

donderdag 17 juni 2004 23:47

Acties:

Verwijderd

als je id="vraag_1" hebt moet je natuurlijk wel ('vraag_'+(waarde-1)) doen...
mischien dat?

[ Voor 33% gewijzigd door Verwijderd op 17-06-2004 23:47 ]

donderdag 17 juni 2004 23:51

Acties:

JayVee

shibby++!

Probeer dit eens: http://www.alistapart.com/articles/eatcake/
Hier de demo: http://www.alistapart.com/d/eatcake/5.html

ASCII stupid question, get a stupid ANSI!

vrijdag 18 juni 2004 01:19

Acties:

Galoptic

Topicstarter

Verwijderd schreef op 17 juni 2004 @ 23:47:
als je id="vraag_1" hebt moet je natuurlijk wel ('vraag_'+(waarde-1)) doen...
mischien dat?

Daar zit 't 'm niet, de ID's zijn nu gewoon ID=vraag1 etc...

zondag 20 juni 2004 23:09

Acties:

Verwijderd

hmmm ik heb een beetje zitten slapen bij het tikken van die code geloof ik

. Probeer eens de quotes om het eerste argument weg te halen in het aanroepen van de functie gaVraag() in de div, dit omdat hij het als een integer moet verwerken en misschien cast ie hem niet als je als argument '1' ipv 1 meegeeft...

Dus gaVraag(1,'a') i.p.v. gaVraag('1','a')...

edit: even snel getest en bij mij doet ie het prima als je de integer-variant gebruikt

.

[ Voor 18% gewijzigd door Verwijderd op 20-06-2004 23:14 ]