# Versteckten Text nachdem Radiobutton ausgewählt wurde



## rackerli (22. Juli 2011)

Hallo liebe Gemeinde,

ich brauch mal eure Hilfe

das ist mein script " nur ein Notlösung" ich bekomme das mit dem if und else nicht wircklich hin.´


```
<form name="Frage1" action="select.htm">
        <table border="0" cellspacing="0" cellpadding="0" width="590" Inside%Tag>
          <tr valign="top" align="left">
            <td width="590" class="TextObject">
              <p style="margin-bottom: 0px;">Omega-3-Fettsäuren sind - zumindest im übertragenen Sinn - in aller Munde. Studien legen nahe, dass sie u.a. Herz und Kreislauf schützen. Worin finden sich denn große Mengen dieser Fette?</p>
<input type="radio" id="F11" name="F1" style="height: 13px; width: 13px;"> Huhn</p>
<input type="radio" id="F12" name="F1" style="height: 13px; width: 13px;"> Fisch</p>
 <input type="radio" id="F13" name="F1" style="height: 13px; width: 13px;"> Butter</p>
 <form action="input_button.htm">
  <p>
```

*Bis hierher ist alles klar * 
den unteren Teil will ich eigentlich nicht so pro Frage gibt es eine Richtige Antwort mit erklärung die anderen beiden werden nur mit Falsch gekennzeichnet.

```
<textarea cols="50" rows="2" name="textfeld"></textarea>
    <input type="button" name="Text 1" value="Auflösung"
      onclick="this.form.textfeld.value='Antwort B - Fisch - Omega-3-Fettsäuren kommen vor allem in fettreichen Meeresfischen wie Makrele, Lachs und Hering vor. Daneben gelten auch Raps- und Walnussöl als gute Quellen für diese essentiellen Fettsäuren. '">
  </p>
</form></td>
```


hier nur meine Frage was muss ich machen damit wenn einer der Button ausgewählt wurde der enstprechnde Text " Richtig" oder "Falsch" in eniem Textfeld erscheint das zu beginn natürlich nicht sichbar sein sollte

Um Hilfe wäre ich sehr verbunden sonst werden die Nächte immer kürzer

Vielen Dank schon mal im voraus


----------



## ComFreek (22. Juli 2011)

Das kannst du mit JavaScript machen.
Also du legst einen versteckten Text, z.B:

```
<span style="display: none" id="answer">Richtig</span>
```

Und wenn der Button gedrückt wird:

```
document.getElementById("answer").style.display = "inline";
```


----------



## rackerli (22. Juli 2011)

Hallo ComFreak

ich wollte auf den Button "Auflösung" ganz verzichten, sondern wenn einer der drei Radiobutton gedrückt wird der entsprechende Text erschien

vielleicht steh ich auch gerade sehr neben mir also eigentlich wenn z.B. A gedrückt wird soll richtig erscheinen und bei B falsch und das ganze unterhalb in eine Textfeld das beim Start verborgisen ist.

Danke vorab


----------



## ComFreek (22. Juli 2011)

Dann fügst du einfach mein JS-Code dem onclick-Event der einzelnen Radio-Button hinzu.

Und wenn du möchtest, kannst du aus dem "span" ein "textarea" machen.


----------



## rackerli (22. Juli 2011)

ich weiss das ich dumm frage, aber wo genau muss ich das einfügen wenn ich es unter den button setzte geht nix


----------



## ComFreek (22. Juli 2011)

Wie hast du denn das versucht (Code)?

So habe ich mir das vorgestellt:


```
<input type="radio" id="F11" name="F1" style="height: 13px; width: 13px;" onclick='document.getElementById("answer").style.display = "inline";
'> Huhn</p>

<textarea style="display: none" id="answer">"Huhn" ist richtig!</textarea>
```


----------



## rackerli (23. Juli 2011)

ComFreek hat gesagt.:


> Wie hast du denn das versucht (Code)?
> 
> So habe ich mir das vorgestellt:
> 
> ...


 
Erstmal vielen vielen Dank, 
jetzt noch eine kleine weitere Frage, wie kann ich die Button sperren wenn einer ausgewählt wurde, sonst kann man ja solange ausprobieren bis man die richtige antwort hat und dann ist es nicht wircklich sinnvoll

Vielen Dank im voraus


----------



## ComFreek (24. Juli 2011)

Das kann man mit dem Attribut "readonly" in Formularen erledigen.

Dieses kannst du per "setAttribute" mit JS setzen.

Da du jetzt doch mehr als eine Funktion hast, würde ich vorschlagen, dass du alles in eine Funktion packst.
Also:

```
<script type="text/javascript">
  function radioClicked()
  {
     document.getElementById("answer").style.display = "inline";
  }
</script>

<input type="radio" id="F11" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';
'> Huhn</p>
```
Falls du mehr Tips brauchst, frag einfach nach!


----------



## rackerli (24. Juli 2011)

Hallo 

ich schaffs einfach nicht was mach ich falsch, wo hab ich den denkfehler und wo geb ich jetz ein was richtig oder falsch ist find ich auch nciht mehr

```
<script type="text/javascript">
  function radioClicked()
  {
     document.getElementById("f1a").style.display = "inline";
     document.getElementById("f1b").style.display = "inline";
     document.getElementById("f1c").style.display = "inline";
  }
</script>

<form>
<input type="radio" id="F1" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>A</p>
<input type="radio" id="F1" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>B</p>
<input type="radio" id="F1" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>C</p>
</form>
```


----------



## ComFreek (25. Juli 2011)

Wo ist denn bei deinem Code ein Element mit der ID f1a, f1b, f1c?

Außerdem hast du allen Radio-Inputs die gleiche ID vergeben, das darf man nicht!

Also zuerst vergibst du jedem Element eine eigene ID (z.B. "radioA", "radioB", "radioC").
In 'radioClicked()' sprichst du - wie in deinem Code - die Elemente per getElementById an und setzt per setAttribute das Attribut readonly auf readonly.

Außerdem setzt du wie in meinem Beitrag #8 das Antwortenfeld auf 'sichtbar', also per _.style.display_.


PS:
Bitte setzte deinen Code nächstes mal in sog. Code-Tags, z.B. [code=html]...[/code].
Dann sind sie formatiert!​


----------



## rackerli (25. Juli 2011)

OK das mit dem ID hab ich verstanden aber der Rest, war ein versehen wobei das beim Display allein prima funktioniert hat 
wo genau muss ich was reinschreiben

Ich fang gerade erst an und will es wircklich auch verstehen


----------



## ComFreek (25. Juli 2011)

Wie gesagt, vergebe jedem Feld eine eigene ID (also <input ... id="x" />)
Dann schreibst du für jedes Feld in die Funktion:

```
document.getElementById('feld-mit-id1').setAttribute('readonly', 'readony');
```


----------



## rackerli (25. Juli 2011)

So hab jetzt jedem ID einen eingenen namen vergeben und dreimal eingesetzt

so siehts jetzt aus, 
aber wenn z.B. a ausgewählt wurde muss ich doch b und c sagen das es nicht mehr verwendet werden ( also grau unterlegt) kann, genauso sollte es bei der auswahl  b oder c sein.

die Auswahl sollte nur einmal möglich sein, ansonsten kann der anwender ja solange probieren bis er die richtige antwort hat, dabei soll eigenltich dann der entsprechende text richtig bzw falsch erscheinen.

ich weis das ich vermutlich dumm frage aber irgend wann fängt jeder mal, also bitte nicht böse sein

```
<script type="text/javascript">
  function radioClicked()
  {
 document.getElementById('F1a').setAttribute('readonly', 'readonly'); 
 document.getElementById('F1b').setAttribute('readonly', 'readonly'); 
 document.getElementById('F1c').setAttribute('readonly', 'readonly'); 

  }
</script>

<form>
<input type="radio" id="F1a" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>A</p>
<input type="radio" id="F1b" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>B</p>
<input type="radio" id="F1c" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>C</p>
</form>
```


----------



## ComFreek (25. Juli 2011)

> ich weis das ich vermutlich dumm frage aber irgend wann fängt jeder mal, also bitte nicht böse sein


Ich möchte dich nur bitten auf Groß- und Kleinschreibung zu achten und die Code-Tags ([code=html]...[/code]) zu benutzen!

Der Code funktioniert nicht, da man statt readonly das Attribut disabled benutzen muss.
Sorry, das war ganz klar mein Fehler 

Also einfach im Code "readonly" durch "disabled" tauschen!


----------



## rackerli (25. Juli 2011)

Sorry

mach ich dann künftig

jetzt hab ich den Code nochmals geändert aber ich kann immer noch alle drei verwenden, was mach ich falsch

```
<script type="text/javascript">
  function radioClicked()
  {
 document.getElementById('F1a').setAttribute('readonly', 'disabled '); 
 document.getElementById('F1b').setAttribute('readonly', 'disabled '); 
 document.getElementById('F1c').setAttribute('readonly', 'disabled '); 

  }
</script>

<html>
<input type="radio" id="F1a" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked(F1a)';>A</p>
<input type="radio" id="F1b" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked(F1b)';>B</p>
<input type="radio" id="F1c" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked(F1c)';>C</p>
</html>
```


----------



## ComFreek (26. Juli 2011)

Wie gesagt, bitte umschließe deinen Code mit [code=html]Dein Code[/code]!

Du musst alle "readonly" durch "disabled" ersetzen. Ich hatte nämlich das falsche Attribut gewählt (sorry), also:

```
<script type="text/javascript">
  function radioClicked()
  {
 document.getElementById('F1a').setAttribute('disabled', 'disabled'); 
 document.getElementById('F1b').setAttribute('disabled', 'disabled'); 
 document.getElementById('F1c').setAttribute('disabled', 'disabled'); 

  }
</script>

<html>
<input type="radio" id="F1a" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>A</p>
<input type="radio" id="F1b" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>B</p>
<input type="radio" id="F1c" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked()';>C</p>
```


----------



## rackerli (26. Juli 2011)

Hallo

genauso hab ich mir das vorgestellt, leider funktioniert das nicht wenn ich MLR verwende, wobei ich das noch verschmerzen kann bzw. anders lösen kann.
Jetzt habe ich aber nicht nur eine Frage sonder mehrere. Jetzt ist es doch so das ich über den "id" und "name" das schliessen der Button nach erfolgter Auswahl abwähle.  D.h. doch das ich das auch über die entsprechende Buttongruppe ( 1.Frage =id F1a,b oder und Name F1 das ganze steuern muss.
 Muss ich jetzt das script entsprechend erweitern bzw wie trenne ich die entsprechenden Gruppen.


----------



## ComFreek (27. Juli 2011)

Was ist denn MLR? Habe dazu nichts (passendes) im Internet gefunden.



> Muss ich jetzt das script entsprechend erweitern bzw wie trenne ich die entsprechenden Gruppen.


Du willst also die Radio-Inputs per "name"-Attribut auf "disabled" stellen?

Folgendes müsste klappen

```
function radioClicked(name)
{
  var radios = document.getElementsByName(name);
  for (var i=0; i<radios.length; i++)
  {
    radios[i].setAttribute('disabled', 'disabled');
  }
}
```


```
<input type="radio" id="F1a" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked("F1")';>A</p>
<input type="radio" id="F1b" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked("F1")';>B</p>
<input type="radio" id="F1c" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked("F1")';>C
```


----------



## rackerli (27. Juli 2011)

Vielen Dank für deine Hilfe, aber leider funktioniert es nicht, jetzt bekomme ich eine Fehlermeldung "Bezeichner erwartert"

ich verzweifel langsam, ich finde auch keine vernünftige Erklärung im Internet


----------



## ComFreek (28. Juli 2011)

Also bei mir mit Google Chrome 12 funktioniert es so:

```
<!doctype html>
<html>
  <head>
    <title></title>
    <script type="text/javascript">
      function radioClicked(name)
      {
        var radios = document.getElementsByName(name);
        for (var i=0; i<radios.length; i++)
        {
          radios[i].setAttribute('disabled', 'disabled');
        }
      }
    </script>
  </head>
  
  <body>
    <input type="radio" id="F1a" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked("F1")';>A
    <input type="radio" id="F1b" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked("F1")';>B
    <input type="radio" id="F1c" name="F1" style="height: 13px; width: 13px;" onclick='radioClicked("F1")';>C
  </body>
  
</html>
```


----------

