[JavaScript] Prüfung und Variablenausgabe

asseskiller · 26. Juli 2007

Hi,
ich habe 2 optionsboxgruppen in 2 unterschiedlichen formularen.
Ich will nun, das wenn z.b. in der ersten optionsgruppe die erste option und in der zweiten optionsgruppe die 3. option, das dann ein bestimmter text an einer anderen stelle ausgegeben wird. Wie kann ich das realisieren.

Es würde mich generell mal interessieren wie man bei JavaScript text ausgibt ohne einen allert befehl. Das heißt ich würde gerne irgentwo eine art variable plazieren und dort z.b. bei bestimmter prüfung der radiobuttons einen bestimmten text ausgeben.

ich hab das ma so probiert wenn ich jetzt nur eine radiogroup abfrage

Code:

function show_pic(element)
{
  switch(element.value)
  {
    case "wert1":
        document.getElementById("textdiv").write("text1");
    break;
    
    case "wert2":
       document.getElementById("textdiv").write("text2");
    break;
  }

}

den div hab ich so gekennzeichnet:

HTML:

<div id="texdiv"></div>

aber das funzt garnet.
Abgesehen davon fragt der da ja bloß eine radiogroup ab und nicht 2 gleichzeitig.

cheft · 26. Juli 2007

Hab da mal eben ein Beispiel gebastelt, schau es dir mal an, dürfte dir weiterhelfen.

HTML:

<html> 
 <head>
  <title>HTML - JavaScript Test</title>
  <script language="JavaScript">
   function eval_input(){
    // Variablendeklaration
    var opt1value;
    var opt2value;
    // Radioboxgruppen referenzieren
    var optgroup1 = document.getElementsByName('group1');
    var optgroup2 = document.getElementsByName('group2');
    // Ausgabeelemen referenzieren
    var output = document.getElementById('output');
 
    // Werte der Radioboxen auswerten und in die Valuevariablen schreiben
    if (optgroup1[0].checked == true) {
     opt1value = optgroup1[0].value;
    }
    if (optgroup1[1].checked == true) {
     opt1value = optgroup1[1].value;
    }
    if (optgroup2[0].checked == true) {
     opt2value = optgroup2[0].value;
    }
    if (optgroup2[1].checked == true) {
     opt2value = optgroup2[1].value;
    }
 
    // Überprüfen welche Kombinationen gewählt wurden (eventuell über switch besser lösbar)
    // und entsprechenden Text ausgeben
    if (opt1value == 11 && opt2value == 21){
       output.innerHTML = "Test1";
    }
    if (opt1value == 12 && opt2value == 21){
       output.innerHTML = "Test2";
    }
    if (opt1value == 11 && opt2value == 22){
       output.innerHTML = "Test3";
    }
    if (opt1value == 12 && opt2value == 22){
       output.innerHTML = "Test4";
    }
   }
  </script>
 </head>
 <body>
  <a href="javascript:eval_input();">Prüfen</a><br>
  <form name="formular1">
   <input type="radio" name="group1" value="11" checked> Option 1<br>
            <input type="radio" name="group1" value="12"> Option 2
  </form>
 
  <form name="formular2">
   <input type="radio" name="group2" value="21" checked> Option 1<br>
            <input type="radio" name="group2" value="22"> Option 2
  </form>
  <div id="output"></div>
 </body>
</html>

Die Überprüfung welche Werte gesetzt wurden ließe sich eventuell besser lösen, hab jetzt aber keine Zeit für

asseskiller · 26. Juli 2007

HAb jetzt erstma versucht ne ausgabe zu machen, aber das funzt nicht

hier ma der quelltext

HTML:

function show_pic(element)
{
  switch(element.value)
  {
    case "wert1":
        document.getElementById("1").setAttribute("src", "1");
		document.all.details.innerHTML = "Text1";
    break;
    
    case "wert2":
       document.getElementById("1").setAttribute("src", "2");
	   document.all.details.innerHTML = "Text2";
    break;
	
	case "wert3":
       document.getElementById("1").setAttribute("src", "3");
	   document.all.details.innerHTML = "Text3";
    break;
  }

}

das element in dem es angezeigt werden soll sieht so aus

HTML:

 <p id="details">Details
  <p />

Ich weiß nicht mehr weiter ... ich bin am verzweifeln

EDIT: Das bild wird richtig angezeigt aber der text nicht

cheft · 26. Juli 2007

probier es mal mit:

document.getElementById('details').innerHTML = "Text";
anstatt document.all.details.innerHTML = "Text1";

Du must dem Browser ja schon sagen, dass er in ein bestehendes HTML Tag Element reinschreiben soll und vor allem in welches.
So wie du es gemacht hast würdest du eine Inputbox mit dem Namen "details" brauchen welches die Eigenschaft innerHTML besitzt

Edit1:
BTW: da fällt mir übrigends gerade in deinem ersten Post auf das du im 2. Block ein "t" beim Div Element vergessen hattest

Edit2:
ach ja, müste das in deinem 2. Post , 2. CodeBlock nicht <p id="details">Details</p> heissen?

asseskiller · 26. Juli 2007

super danke

hab jetzt noch ein problem

schaut mal hier klick
In firefox funzt alles so wie ich es will. Im IE7 garnicht wisst ihr woran das liegt.
Die bilder werden im IE erst dann angezeigt und gewechstelt, wenn man drauf klickt. Woran liegt das

Danke im vorraus

cheft · 30. Juli 2007

Upps, vergessen reinzuschauen ^^

Nimm nicht das onchange Ereignis bei den Option Boxen, sondern das onclick Ereignis. Und schon funktioniert das ganze. (IE führt das onchange Ereignis erst aus, nachdem das betreffende Element verlassen wurde)

Allerdings hast du da noch einen anderen Fehler, den ich auf die schnelle aber auch nicht finde.

asseskiller · 30. Juli 2007

Hey super danke, daran lag es.

asseskiller · 30. Juli 2007

Einen fehler gibts noch, beim click auf die objekte, ändert sich die schrift nicht, die sich unter ihr preis ändern soll.

cheft · 30. Juli 2007

^^ Meine Güte, ich sollte sowas beruflich machen *lach*

ne, du hast jetzt noch folgendes Problem:
Der Text unter "Ihr Preis" ändert sich nicht, weil die JavaScript Befehlszeile vor der entsprechenden Anweisung einen Fehler auslöst.

Damit das nicht geschieht must du unten im Quelltext statt dem <p id="details"...> </p> das DIV Element benutzen, also <div id="details> </div> und schon funktioniert das ganze (Jedenfalls bei mir im IE 6 ^^)

Suche

[JavaScript] Prüfung und Variablenausgabe

asseskiller

Lt. Junior Grade

cheft

Lt. Junior Grade

asseskiller

Lt. Junior Grade

cheft

Lt. Junior Grade

asseskiller

Lt. Junior Grade

cheft

Lt. Junior Grade

asseskiller

Lt. Junior Grade

asseskiller

Lt. Junior Grade

cheft

Lt. Junior Grade

Ähnliche Themen