Archivlink: javarea.de Forum > JavaScript > zwei Scripte
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > zwei Scripte

Pages: [1]
geschrieben von Herbert1204 am 18.02.2010 - 19:14
Hallo
Ich habe eine Seite mit zwei Skripts erstellt. Ein Script mit dem man zwei Teile einer Seite wechselweise anzeigen bzw. verstecken kann. Mit dem anderen Script soll eine neue Seite in einem iFrame angezeigt werden.

Beim Script für das wechselweise Anzeigen waren zuerst die Werte auf das Script abgestimmt und es funktionierte alles. Weil ich aber beiden Button den gleichen Wert geben will, habe ich es mit einem id-Wert probiert. Jetzt funktioniert gar nichts mehr.
Wenn ich beim anderen Script die neue Seite in einem anderen Frame aufrufe, funktioniert es hervorragend. Wenn aber der iFrame als Ziel angegeben wird, klappt gar nichts mehr.

Ich habe schon versucht es selbst umzuschreiben, aber ich stoße dabei einfach an meine Grenzen.


Hier das Script








<script language="JavaScript">
<!--
// (C) 1999 Klaus Hentschel
// e-mail: Black_runner@t-online.de
// www: http://Java.topcool.de

function pulldown(form) {
var mypull=form.select.selectedIndex
window.open(form.select.options[mypull].value, target="Auswahl-Fensterlein");
}
//-->
</SCRIPT>





<script>
function showIt(t) {
v = t.value;
if(v == 'vt') {
document.getElementById('opt_vt').style.display = 'block';
document.getElementById('opt_nt').style.display = 'none';
}
else {
document.getElementById('opt_vt').style.display = 'none';
document.getElementById('opt_nt').style.display = 'block';
}
}
</script>





<form name="myform">

<table border="1" cellspacing="0" width="100%" bordercolordark="white" bordercolorlight="black">
<tr>
<td height="1" align="left" valign="top">

<p class="unteroption" id="opt_vt" style="display:none;">
<table cellspacing="0" width="100%" height="1" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="120">
<input type="submit" id="nt" onClick="showIt(this)" value="Niedersachsen" style="font-family:Arial; font-weight:bold; font-size:11pt; color:blue; text-align:left; text-decoration:underline; background-color:rgb(255,255,204); border-width:1px; border-color:rgb(255,255,204); border-style:solid; width:110; cursorointer;">
</td>
<td width="100%">
<select name="select" size="1" onChange="showIt(this); pulldown(this.form)" style="font-family:Arial; font-weight:bold; font-size:11pt;">
<option value="H.htm">H - Region Hannover</option>
<option value="NOM.htm">NOM - Landkreis Northeim</option>
</select>
</td>
</tr>
</table>

<p class="unteroption" id="opt_nt">
<table cellspacing="0" width="100%" height="1" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="110">
<input type="submit" id="vt" onClick="showIt(this)" value="Niedersachsen" style="font-family:Arial; font-weight:bold; font-size:11pt; color:blue; text-align:left; text-decoration:underline; background-color:rgb(255,255,204); border-width:1px; border-color:rgb(255,255,204); border-style:solid; width:110; cursorointer;">
</td>
<td width="100%">
<iframe name="Auswahl-Fensterlein" width="100%" height="20" src="../../Ortsauswahl/weltweit.htm" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
</iframe>
</td>
</tr>
</table>

</td>
</tr>
</table>


</form>

geschrieben von Danny am 21.02.2010 - 13:52
Hallo Herbert,

ich verstehe ehrlich gesagt nicht was du möchtest. Aber hier mal ein paar Anmerkungen zu dem Code, die eventuell auch dein Problem lösen.

1. id ungleich value

Du fragst im showIt nach dem value Attribut und prüfst ob es "vt" ist. Value bei deinen Submits ist aber value="Niedersachsen". Richtiger wäre hier die id u vergleichen.

HTML-Quelltext
1: 

v = t.id;


2. submit sendet Formular

Submit Button senden das Formular an die in action="..." angegebene Seite. Wenn nichts angegeben wird, schickt er es an die gleiche Seite noch einmal. Auf jeden Fall wird die Seite neu geladen und die display Änderungen sind wieder futsch.
Entweder du nimmst anstatt submit ein button oder du unterbrichst das Absenden indem du im onsubmit Event Handler false zurückgibst.

z.B. so

HTML-Quelltext
1: 

<form name="myform" onsubmit="return false;">


Warum verwendest du dann aber überhaupt ein Formular wenn nichts gesendet werden soll ?


Gruß Danny

geschrieben von Herbert1204 am 22.02.2010 - 17:07
Hallo Danny
Vielen Dank für Deine Antwort. Leider verstehe ich sie nicht.
Ich habe unten noch einmal ein Script eingefügt, wie ich es bisher benutzt habe. Das Problem dabei war, dass ich auf dem Button nie ein Wort nach meiner Wahl schreiben konnte. Deshalb habe ich immer ein jpg-Bild auf den Button gesetzt. Daher suche ich eine Möglichkeit, die ein zusätzliches jpg-Bild überflüssig macht.

Bisher habe ich immer nur zwei Teile gehabt, wovon eines sichtbar war. Gibt es auch eine Möglichkeit eine unbegrenzte Anzahl von Teilen auf einer Seite zu haben, wovon nur eines angezeigt wird?



<script>
function showIt(t) {
v = t.value;
if(v == 'vt') {
document.getElementById('opt_vt').style.display = 'block';
document.getElementById('opt_nt').style.display = 'none';
}
else {
document.getElementById('opt_vt').style.display = 'none';
document.getElementById('opt_nt').style.display = 'block';
}

}
</script>





<table cellspacing="0" width="500" bordercolordark="white" bordercolorlight="black" border="1">
<tr>
<td align="left" valign="top">

<input type="radio" name="tage" value="vt" onClick="showIt(this)">
<font face="Arial"><span style="font-size:11pt;">Die Fahrt ist einmalig</span></font>

</td>
</tr>
<tr>
<td align="left" valign="top" height="30">

<input type="radio" name="tage" value="nt" onClick="showIt(this)">
<font face="Arial"><span style="font-size:11pt;">Die Fahrt ist regelm&auml;&szlig;ig</span></font>

</td>
</tr>
<tr>
<td align="left" valign="top">

<p>&nbsp;</p>

<p class="unteroption" id="opt_vt" style="display:none;">
<input type=button value="Datum auswählen" style="font-weight:bold; font-size:12px; width:110px; height:20px;">
<input name=dc readOnly style="font-weight:bold; font-size:15px; text-align:center;" size="8">


<p class="unteroption" id="opt_nt" style="display:none;">
<font face="Arial"><span style="font-size:11pt;">Abfahrtstage:</span></font>

</td>
</tr>
</table>

geschrieben von Danny am 22.02.2010 - 18:10
Hallo Herbert,

noch einmal zum Verständnis folgendes auf das Script aus dem ersten Post bezogen. Du hast ein Submit Button

HTML-Quelltext
1: 

<input type="submit" id="vt" onClick="showIt(this)" value="Niedersachsen"  />


mit Klick auf diesen, rufst du showIt(t) auf und übergibst das Element. In der Funktion hast du also in t das Submit-Button-Element stehen.
Jedes Element hat ja verschiedene Attribute, in dem Fall type="submit", id="vt", value="Niedersachsen" und onclick="showIt()".
In der Javascript Funktion kannst du auf diese Attribute zugreifen:

HTML-Quelltext
1: 
2: 
3: 
4: 

t.type       // enthält "submit"
t.id           // enthält "vt"
t.value      // enthält "Niedersachsen"
t.onclick    // Referenz auf showIt()


Du speicherst jetzt in der Funktion in der Variable v das value Attribut von t. Im oben genannten Fall speicherst du als "Niedersachsen" in v. Der Fehler ist aber, du fragst im nächsten Schritt nach ob v == 'vt' ist, das wird es aber nie sein weil es kein Element gibt welches das value Attribut "vt" besitzt und die Funktion aufruft.
Nach meinem Verständnis überprüfst du das id Attribut, dafür müsste die darüberliegende Zeile aber

HTML-Quelltext
1: 

v = t.id;


lauten oder die Abfrage

HTML-Quelltext
1: 

if(v == "Niedersachen") {


Zweitere ist in der Regel nicht zu bevorzugen, da sich die Buttons auch mal von der Beschriftung ändern können (z.B. mehrsprachige Seite o.ä)

das war jetzt auf den ersten Post bezogen, nun hast du Radio Elemente die u.a. auch das value Attribut "vt" annehmen ...
Somit macht der Javascript Code auch wieder Sinn ;)

Natürlich kann man auch mehrere Elemente verstecken/anzeigen.. Es kommt immer etwas darauf an wieviele es sind. Ab einer gewissen Zahl lohnt sich das dynamisch zu bauen und nicht jede Box einzeln zu verstecken.

Hier aber mal ein kleines Beispiel mit 3 Schaltern (vt, nt und xt (was auch immer die Sachen bedeuten )) und "vereinfachten" Code

HTML-Quelltext
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: 

<script>
    function showIt(t) {
        v = t.value;
        if(v == 'vt') {
            document.getElementById('opt_vt').style.display = 'block';
            document.getElementById('opt_nt').style.display = 'none';
            document.getElementById('opt_xt').style.display = 'none';
        }  else if(v == 'nt') {
            document.getElementById('opt_vt').style.display = 'non';
            document.getElementById('opt_nt').style.display = 'block';
            document.getElementById('opt_xt').style.display = 'none';
        } else {
            document.getElementById('opt_vt').style.display = 'none';
            document.getElementById('opt_nt').style.display = 'none';
            document.getElementById('opt_xt').style.display = 'block';
        }
}
</script>

<input type="radio" name="tage" value="vt" onClick="showIt(this)"> Die Fahrt ist einmalig <br />
<input type="radio" name="tage" value="nt" onClick="showIt(this)"> Die Fahrt ist regelm&auml;&szlig;ig <br />
<input type="radio" name="tage" value="xt" onClick="showIt(this)"> Die Fahrt ist niemals <br />

<p id="opt_vt" style="display:none;">Box einmalige Fahrt</p>
<p id="opt_nt" style="display:none;">Box egelm&auml;&szlig;ig Fahrt</p>
<p id="opt_xt" style="display:none;">Box niemalige Fahrt</p>



Wie du siehst kann man das beliebig fortführen .. der Code wächst natürlich sehr schnell, da in jedem Zweig alle möglichen Boxen ausgeblendet werden müssen...
Entweder man speichert sich die aktuell sichtbare Box in einer globalen Variable und blendet nur immer die eine aus und die neue ein, da man sich sicher sein kann, dass alle anderen vorher auch schon nicht sichtbar sind oder man gibt allen Boxen eine spezielle Eigenschaft z.B. die CSS Klasse "box" und sucht im Javascript nach allen Boxen mit dieser Eigenschaft und schaltet sie unsichtbar.

Wenn du an einer solchen "allgemein gültigeren" Lösung interessiert bist und Hilfe benötigst kannst du dich ja noch einmal melden.


Den ersten Teil mit der Frage und jpg Bild, da musst du mal ein Beispiel machen, aber ich vermute es läuft auf diese id und value Sache (ganz oben erklärt) hinaus.

Gruß Danny

geschrieben von Herbert1204 am 22.02.2010 - 22:29
Hallo Danny

Vielen Dank für deine Hilfe.
Jetzt habe ich die Funktion verstanden.


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.