Toon posts:

[JavaScript] Wizard maken

Pagina: 1
Acties:

maandag 17 februari 2003 13:47

Acties:

Verwijderd

Topicstarter
Ik ben bezig met het maken van een wizard in JavaScript. Opzich is dat niet zo'n probleem. Maar ik wil graag een wizard maken die gebruik maakt van 1 HTML pagina.

Tot nu toe heb ik dit:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<html>
  <head>
    <title>Javascript Wizard</title>
    
    <script> 
      function showScreen (screenNumber) {
         document.all[getScreenName (screenNumber)].style.visibility = "visible";
      }

      function hideScreen (screenNumber) {
         document.all[getScreenName (screenNumber)].style.visibility = "hidden";
      }

      function getScreenName (screenNumber) {
         switch (screenNumber) {
            case 0: return "scherm1";
            case 1: return "scherm2";
         }
      }
    </script>
    
  </head>
  
<body bgcolor="#ffffff">

<div id="scherm1" style="position:absolute; width:640px; z-index:1; left: 20px; top: 200px"> 
<table width="640" border="1" cellpadding="5" cellspacing="0">
  <tr>
    <td width="320" align="left">
    Wizard: Stap 1 van 4
    </td>
    <td width="320" align="right">
    <input type="button" value="Vorige">
    <input type="button" onclick="showScreen(1)" value="Volgende (werkend)">
    </td>
  </tr>
  <tr>
    <td width="640" colspan="2" align="left">
    Content van stap 1
    </td>
  </tr>
</table>
</div>

<div id="scherm2" style="position:absolute; width:640px; z-index:1; left: 20px; top: 200px"> 
<table width="640" border="1" cellpadding="5" cellspacing="0">
  <tr>
    <td width="320" align="left">
    Wizard: Stap 2 van 4
    </td>
    <td width="320" align="right">
    <input type="button" value="Vorige">
    <input type="button" value="Volgende">
    </td>
  </tr>
  <tr>
    <td width="640" colspan="2" align="left">
    Content van stap 2
    </td>
  </tr>
</table>
</div>


<div id="scherm3" style="position:absolute; width:366px; height:289px; z-index:1; left: 7px; top: 200px;visibility:hidden"> 
  Scherm 3</div>
<div id="scherm4" style="position:absolute; width:366px; height:289px; z-index:1; left: 4px; top: 200px;visibility:hidden"> 
  Scherm 4</div>
<div id="scherm5" style="position:absolute; width:366px; height:289px; z-index:1; left: 3px; top: 200px;visibility:hidden"> 
  Scherm 5</div>

<script>
    var NUMBER_OF_SCREENS = 2;
    for (i = 0; i != NUMBER_OF_SCREENS; i++) {
        hideScreen (i);
    }
    showScreen (0);

</script>

</body>
</html>


Als je bij stap 1 van 4 bent werkt de "Volgende knop". Als je daar op klikt verschijnt "scherm2". Het probleem is dat scherm 1 niet verdwijnt. De schermen komen dus over elkaar heen.

Hoe kan ik "scherm2" te voorschijn toveren terwijl "scherm1" verdwijnt.

Ik snap gerust dat je hiervoor beter PHP/Perl/ASP kunt gebruiken maar ik wil het gewoon perse in JavaScript doen.

[ Voor 27% gewijzigd door Verwijderd op 17-02-2003 13:51 ]

maandag 17 februari 2003 13:55

Acties:
  • Willem
  • Registratie: Februari 2001
  • Laatst online: 19:32

Willem

document.getElementById [ layerNaam ] . style . visibility = hidden of visible :)

Motor (of auto) onderhoud bijhouden

maandag 17 februari 2003 14:02

Acties:

Verwijderd

Topicstarter
Ja, maar er komen meer dan 2 stappen in de wizard voor...

Dus als ik op "Volgende" klik in scherm1 komt scherm2 te voorschijn en moet scherm1 verdwijnen...

Maar als ik op "volgende" klik in scherm2 moet scherm3 te verschijn komen en moet scherm2 weer verdwijnen....

maandag 17 februari 2003 14:06

Acties:
  • Willem
  • Registratie: Februari 2001
  • Laatst online: 19:32

Willem

Dan maak je dus een functie die de status van de layer visible of hidden maakt.


JavaScript:
1
2
3

function doLayer ( layerNaam, aanOfUit ) {
  document.getElementById [ layerNaam ].style.visibility = aanOfUit;
}

Motor (of auto) onderhoud bijhouden

maandag 17 februari 2003 14:29

Acties:

Verwijderd

Topicstarter
Ik begrijp je verhaal niet... Ik heb waarschijnlijk te weinig kennis van JavaScript :)...

JavaScript:
1
2
3

function doLayer ( layerNaam, aanOfUit ) {
  document.getElementById [ layerNaam ].style.visibility = aanOfUit;
}


Dit is toch niet variabel? Of ligt dat nou aan mij?

[ Voor 70% gewijzigd door Verwijderd op 17-02-2003 14:42 ]

maandag 17 februari 2003 14:40

Acties:
  • Willem
  • Registratie: Februari 2001
  • Laatst online: 19:32

Willem

Dan zou ik zeggen ga op zoek naar een goed boek, of check google even voor tutorials :)

Motor (of auto) onderhoud bijhouden

maandag 17 februari 2003 14:50

Acties:
  • Guillome
  • Registratie: Januari 2001
  • Niet online

Guillome

test

offtopic
MDT he ;)

Maar je moet gewoon een tellertje die bijhoudt op welke pagina je bent.
Met volgende doe je ++ en met vorige doe je --.
En dan de functie volgende zoiets:
function volgende()
document.all(scherm + teller).hide
document.all(scherm + (teller++)).showl
}

If then else matters! - I5 12600KF, Asus Tuf GT501, Gigabyte Gaming OC 16G 5080 RTX, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

maandag 17 februari 2003 15:00

Acties:

Verwijderd

Topicstarter

offtopic:

ja :)

maandag 17 februari 2003 15:02

Acties:
  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 22-06 13:51

Clay

cookie erbij?

hou gewoon een "oldLayer" var bij oid. die zet je aan het begin van een toggle functie op hidden, en de nieuwe id die je meegeeft zet je achteraan de functie in die oldLayer, zodat die de volgende keer gehide wordt. heb je er geen omkijken meer naar.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

maandag 17 februari 2003 15:30

Acties:
  • Thijsmans
  • Registratie: Juli 2001
  • Nu online

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Verwijderd schreef op 17 February 2003 @ 14:29:
Ik begrijp je verhaal niet... Ik heb waarschijnlijk te weinig kennis van JavaScript :)...

JavaScript:
1
2
3

function doLayer ( layerNaam, aanOfUit ) {
  document.getElementById [ layerNaam ].style.visibility = aanOfUit;
}


Dit is toch niet variabel? Of ligt dat nou aan mij?
Volgens mij begrijp je het principe van variabelen niet. Als je een functie gebruikt met argumenten, doLayer('dezeLaag', 'hidden') bijv., geef je wél variabelen door. Namelijk 'dezeLaag' (layerNaam krijgt dus de inhoud 'dezeLaag') en aanOfUit. Zo kun je dus met één functie alle layers bepalen.

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

maandag 17 februari 2003 17:37

Acties:

Verwijderd

Verwijderd schreef op 17 februari 2003 @ 14:29:
Ik begrijp je verhaal niet... Ik heb waarschijnlijk te weinig kennis van JavaScript :)...

JavaScript:
1
2
3

function doLayer ( layerNaam, aanOfUit ) {
  document.getElementById [ layerNaam ].style.visibility = aanOfUit;
}


Dit is toch niet variabel? Of ligt dat nou aan mij?
Willem169 bedoelt ook waarschijnlijk

JavaScript:
1
2
3

function doLayer ( layerNaam, aanOfUit ) {
  document.getElementById ( layerNaam ).style.visibility = aanOfUit;
}

(let op de '('...')' i.p.v. '['...']' :P)

maandag 17 februari 2003 17:38

Acties:

Verwijderd

Verwijderd schreef op 17 February 2003 @ 17:37:
[...]

willem169 bedoelt ook waarschijnlijk

JavaScript:
1
2
3

function doLayer ( layerNaam, aanOfUit ) {
  document.getElementById ( layerNaam ).style.visibility = aanOfUit;
}

(let op de '('...')' i.p.v. '['...']' :P)
edit:
die case-sensitive namen ook altijd
Pagina: 1
Reageer