You are not logged in.

  • Login

JavaScript Bewertungsanzeige mit Sternchen

One

Intermediate

  • "One" started this thread

Posts: 48

  • Send private message

1

Tuesday, January 9th 2007, 10:32am

JavaScript Bewertungsanzeige mit Sternchen

Hab mir ne kleine Bewertungsanzeige geschrieben, die die Werte aber nicht speichert ^^ Also einfach nur ein rein optisches Vergnügen ;)

Dazu hab ich mir auch ne Testseite gemacht mit etwas längerem Scriptcode im Head. Spielt aber erstmal keine Rolle.

Hier erstmal der Testcode meiner Anzeige:

HTML 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
83
84
85
86
87
88
89
90
91
92
93

<html>
<head>
 
<script language="JavaScript">
<!-- vor alten Browsern verstecken
 
  var browserOK = false;
 
// -->
</script>
 
<script language="JavaScript">
<!-- vor alten Browsern verstecken
 
  // Anwender benutzt einen JS 1.1 Browser!
  browserOK = true;
 
  bild= new Array(); // Array fuer Bilder erzeugen
 
  //Hier werden die Bilder in den Speicher geladen:
 
  bild[2] = new Image();
  bild[2].src = "stern.gif";
  bild[1] = new Image();
  bild[1].src = "stern2.gif";
 
// -->
</script>
 
 
 
<script language="JavaScript">
<!-- vor alten Browsern verstecken
 
var AnAus = false; // Zustand des Schalters am Anfang
 
function schalten(imag) {
  if (browserOK) { 
          switch (imag) {
                case "stern1":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[2].src;
                        document.stern3.src = bild[2].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern2":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[2].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern3":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern4":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[1].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern5":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[1].src;
                        document.stern5.src = bild[1].src;
                        break;
                }
 
  }
}
 
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<center>
<a href="javascript:schalten('stern1');"><img name="stern1" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern2');"><img name="stern2" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern3');"><img name="stern3" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern4');"><img name="stern4" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern5');"><img name="stern5" src="stern.gif" border="0"></a>
 
</center>
</body>
</html>


Die Anzeige funktioniert super und auch so wie ich es wollte...

Jetzt wollt ich die Anzeige unter meine Artikel packen.. Also aus Testzwecken erstmal den Javascriptcode in die Head kopiert und die "a href" Zeilen unter meine Artikelbilder... Die Anzeige der grauen Sterne (zum Verständniss: stern.gif = grauer Stern, stern2.gif = leuchtender Stern) ist zwar da, aber beim draufklicken passiert nichts...

Hab mir erst gedacht das es an dem Pfad liegt, aber die grauen werden ja angezeigt.. Ich weiß da echt nicht mehr weiter.. Woran kanns noch liegen? Wenn ihr den anderen Quelltext auch noch braucht:

HTML 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250

<html>
<head>
<title>Warenliste indischer Tees</title>
<meta name="author" content="blubb">
 
<link rel="stylesheet" type="text/css" href="../skripts/EinheitBody.css">
<script type="text/javascript" src="../skripts/WarenEinkauf.js"></script>
<script language="JavaScript">
<!-- vor alten Browsern verstecken
 
  var browserOK = false;
 
// -->
</script>
 
<script language="JavaScript">
<!-- vor alten Browsern verstecken
 
  // Anwender benutzt einen JS 1.1 Browser!
  browserOK = true;
 
  bild= new Array(); // Array fuer Bilder erzeugen
 
  //Hier werden die Bilder in den Speicher geladen:
 
  bild[2] = new Image();
  bild[2].src = "../skripts/stern.gif";
  bild[1] = new Image();
  bild[1].src = "../skripts/stern2.gif";
 
// -->
</script>
 
 
<script language="JavaScript">
<!-- vor alten Browsern verstecken
 
var AnAus = false; // Zustand des Schalters am Anfang
 
function schalten(imag) {
  if (browserOK) {
          switch (imag) {
                case "stern1":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[2].src;
                        document.stern3.src = bild[2].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern2":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[2].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern3":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern4":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[1].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern5":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[1].src;
                        document.stern5.src = bild[1].src;
                        break;
                }
 
  }
}
 
// -->
</script>
 
</head>
 
<body text="#000000" bgcolor="#E8FFDD" link="#FF0000" alink="#FF0000" vlink="#FF0000">
 
 
 
 
 
 
 
<table border=0 cellspacing=0 cellpadding=2>
<H3>Auswahl von indischen Tees</H3>
<br>
<br>
 
<tr>
<td>
<IMG SRC="../gesBilder/artikel/Darjeel1.jpg" width="150" BORDER="1" ALT="Darjeeling">
</td>
 
<td width="380">
Artikelnr: 4
<br>
<b>Namring Upper T.G.F.O.P.1</b>
<br>
<a href="javascript:schalten('stern1');"><img name="stern1" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern2');"><img name="stern2" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern3');"><img name="stern3" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern4');"><img name="stern4" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern5');"><img name="stern5" src="../skripts/stern.gif" border="0"></a>
<br><br>
Dieser qualitativ hochwertige First flush Darjeeling besticht
durch sein frisches, blumiges Aroma und durch seinen spritzigen s&uuml;sslichen Geschmack.
 
 
 
</td>
<td>
<FORM>
 Menge                                    Anzahl
 <br>
<SELECT NAME="Selected">
 <OPTION>Bitte w&auml;hlen</OPTION>
 <OPTION VALUE="50"> 100 Gramm 7.99 &euro;</OPTION>
 <OPTION VALUE="100">250 Gramm 16.99 &euro;</OPTION>
 <OPTION VALUE="250">500 Gramm 31.99 &euro;</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
 
<INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(4,this.form.Selected.selectedIndex,Anzahl.value)">
 
 
</FORM>
</td>
 
</tr>
 
       <tr><td><td><td></td></td></td></tr>
       <tr><td><td><td></td></td></td></tr>
 
<tr>
 <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
 <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
 <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
</tr>
 
       <tr><td><td><td></td></td></td></tr>
       <tr><td><td><td></td></td></td></tr>
 
<tr>
<td>
<IMG SRC="../gesBilder/artikel/Darjeel2.jpg" width="150" BORDER="1" ALT="Gunpowder">
</td>
 
<td  width="380">
 
Artikelnr: 5
<br>
<b>Nagri Farm T.G.F.O.P.1</b>
<br>
<a href="javascript:schalten('stern1');"><img name="stern1" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern2');"><img name="stern2" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern3');"><img name="stern3" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern4');"><img name="stern4" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern5');"><img name="stern5" src="../skripts/stern.gif" border="0"></a>
<br><br>
Ein angenehm aromatischer Darjeeling mit mildem blumigem Geschmack.
</td>
<td>
<FORM>
 Menge                                    Anzahl
 <br>
<SELECT NAME="Selected">
 <OPTION>Bitte w&auml;hlen</OPTION>
 <OPTION VALUE="50"> 100 Gramm 5.99 &euro;</OPTION>
 <OPTION VALUE="100">250 Gramm 12.99 &euro;</OPTION>
 <OPTION VALUE="250">500 Gramm 21.99 &euro;</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
 
<INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(5,this.form.Selected.selectedIndex,Anzahl.value)">
 
 
</FORM>
</td>
</tr>
       <tr><td><td><td></td></td></td></tr>
       <tr><td><td><td></td></td></td></tr>
<tr>
 <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
 <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
 <td bgcolor=#C0C0C0><img src="transpixel.gif" alt="" border="0" height="0" width="149"><br></td>
</tr>
 
       <tr><td><td><td></td></td></td></tr>
       <tr><td><td><td></td></td></td></tr>
<tr>
<td>
 
 
<IMG SRC="../gesBilder/artikel/Darjeel3.jpg" width="150" BORDER="1" ALT="Golden Nepal">
</td>
 
<td width="380">
 
Artikelnr: 6
<br>
<b>Golden Nepal</b>
<br>
<a href="javascript:schalten('stern1');"><img name="stern1" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern2');"><img name="stern2" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern3');"><img name="stern3" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern4');"><img name="stern4" src="../skripts/stern.gif" border="0"></a>
<a href="javascript:schalten('stern5');"><img name="stern5" src="../skripts/stern.gif" border="0"></a>
<br><br>
Das Aroma ist feinw&uuml;rzig, nuancenreich, kr&auml;ftig und leicht nussig.
</td>
<td>
<FORM>
 Menge                                    Anzahl
 <br>
<SELECT NAME="Selected">
 <OPTION>Bitte w&auml;hlen</OPTION>
 <OPTION VALUE="50"> 100 Gramm 4.20 &euro;</OPTION>
 <OPTION VALUE="100">250 Gramm 10.39 &euro;</OPTION>
 <OPTION VALUE="250">500 Gramm 17.99 &euro;</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="Anzahl" SIZE=1 VALUE="1">
 
<INPUT TYPE="IMAGE" src="../gesBilder/warenkorb.gif" VALUE="1" width="25" onClick="setProdukt(6,this.form.Selected.selectedIndex,Anzahl.value)">
 
 
</FORM>
</td>
</tr>
 
</table>
 
 
 
 
  <a href="kasse.html">ab zur Kasse</a><br>
 
</body>
</html>


Der obige Quelltext stellt das dar was Sache ist... Unter der Artikelbeschreibung soll die kleine Sternanzeige. Die Anzeige ist auch da, aber beim klicken, wie schon gesagt, passiert nichts :(

Würde mich über Hilfe freuen, weil ich nach einigen Stunden irgendwie schon am Verzweifeln bin *lach* ^^

//edit2
Ok hab den Fehler jetzt doch selbst gefunden aber kann ihn nicht beheben... Oder ich kapier den Sinn nicht ^^ Wenn ich mehr als einen Votebalken in der HTML Seite habe, wechseln die Sterne beim klicken nicht mehr, bei einem schon ^^

//edit3
OMG.. ich habs geschafft :) Fehler gefunden und ausgemerzt. Trotz danke für die leute die ins Topic schauten und sich vielleicht schonmal Gedanken gemacht hatten :)

MfG

Euer One ^^
One has attached the following images:
  • stern.gif
  • stern2.gif

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

2

Tuesday, January 9th 2007, 2:05pm

Wenn du den Sterneblock mehrmals einsetzt, dann verwendest du auch die Namen (stern1, stern2, stern3...) mehrmals. Woher soll das Script denn wissen, welches Element es verändern soll

Ich habe mal auf die Schnelle einen Wiki Beitrag zu einer Sternreihe erstellt: JavaScript Sterne

@edit: Poste doch bitte noch deine Änderungen, damit auch andere davon profitieren können
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

One

Intermediate

  • "One" started this thread

Posts: 48

  • Send private message

3

Tuesday, January 9th 2007, 2:27pm

Die ausgelagerte JS-Datei sieht wie folgt aus:

JavaScript 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

var browserOK = false;
 
  // Anwender benutzt einen JS 1.1 Browser!
  browserOK = true;
 
 
  bild= new Array(); // Array fuer Bilder erzeugen
 
  //Hier werden die Bilder in den Speicher geladen:
  bild[2] = new Image();
  bild[2].src = "stern.gif";
  bild[1] = new Image();
  bild[1].src = "stern2.gif";
 
 
var AnAus = false; // Zustand des Schalters am Anfang
 
function schalten(imag) {
  if (browserOK) {
          switch (imag) {
                case "stern1":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[2].src;
                        document.stern3.src = bild[2].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern2":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[2].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern3":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[2].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern4":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[1].src;
                        document.stern5.src = bild[2].src;
                        break;
                case "stern5":
                        document.stern1.src = bild[1].src;
                        document.stern2.src = bild[1].src;
                        document.stern3.src = bild[1].src;
                        document.stern4.src = bild[1].src;
                        document.stern5.src = bild[1].src;
                        break;
                case "stern6":
                        document.stern6.src = bild[1].src;
                        document.stern7.src = bild[2].src;
                        document.stern8.src = bild[2].src;
                        document.stern9.src = bild[2].src;
                        document.stern10.src = bild[2].src;
                        break;
                case "stern7":
                        document.stern6.src = bild[1].src;
                        document.stern7.src = bild[1].src;
                        document.stern8.src = bild[2].src;
                        document.stern9.src = bild[2].src;
                        document.stern10.src = bild[2].src;
                        break;
                case "stern8":
                        document.stern6.src = bild[1].src;
                        document.stern7.src = bild[1].src;
                        document.stern8.src = bild[1].src;
                        document.stern9.src = bild[2].src;
                        document.stern10.src = bild[2].src;
                        break;
                case "stern9":
                        document.stern6.src = bild[1].src;
                        document.stern7.src = bild[1].src;
                        document.stern8.src = bild[1].src;
                        document.stern9.src = bild[1].src;
                        document.stern10.src = bild[2].src;
                        break;
                case "stern10":
                        document.stern6.src = bild[1].src;
                        document.stern7.src = bild[1].src;
                        document.stern8.src = bild[1].src;
                        document.stern9.src = bild[1].src;
                        document.stern10.src = bild[1].src;
                        break;
                case "stern11":
                        document.stern11.src = bild[1].src;
                        document.stern12.src = bild[2].src;
                        document.stern13.src = bild[2].src;
                        document.stern14.src = bild[2].src;
                        document.stern15.src = bild[2].src;
                        break;
                case "stern12":
                        document.stern11.src = bild[1].src;
                        document.stern12.src = bild[1].src;
                        document.stern13.src = bild[2].src;
                        document.stern14.src = bild[2].src;
                        document.stern15.src = bild[2].src;
                        break;
                case "stern13":
                        document.stern11.src = bild[1].src;
                        document.stern12.src = bild[1].src;
                        document.stern13.src = bild[1].src;
                        document.stern14.src = bild[2].src;
                        document.stern15.src = bild[2].src;
                        break;
                case "stern14":
                        document.stern11.src = bild[1].src;
                        document.stern12.src = bild[1].src;
                        document.stern13.src = bild[1].src;
                        document.stern14.src = bild[1].src;
                        document.stern15.src = bild[2].src;
                        break;
                case "stern15":
                        document.stern11.src = bild[1].src;
                        document.stern12.src = bild[1].src;
                        document.stern13.src = bild[1].src;
                        document.stern14.src = bild[1].src;
                        document.stern15.src = bild[1].src;
                        break;
                }
 
  }
 
}


Die HTML Blöcke für die Sterne sehen wie folgt aus:

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<a href="javascript:schalten('stern1');"><img name="stern1" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern2');"><img name="stern2" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern3');"><img name="stern3" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern4');"><img name="stern4" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern5');"><img name="stern5" src="stern.gif" border="0"></a>
 <br>
<a href="javascript:schalten('stern6');"><img name="stern6" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern7');"><img name="stern7" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern8');"><img name="stern8" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern9');"><img name="stern9" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern10');"><img name="stern10" src="stern.gif" border="0"></a>
  <br>
<a href="javascript:schalten('stern11');"><img name="stern11" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern12');"><img name="stern12" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern13');"><img name="stern13" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern14');"><img name="stern14" src="stern.gif" border="0"></a>
<a href="javascript:schalten('stern15');"><img name="stern15" src="stern.gif" border="0"></a>

Similar threads

Tagging

Social bookmarks