Radiobuttons und Event-Handler?

[lousypoetry]

Hallo!

ich hab eine Frage zu Radiobuttons. ich hab zwei Stück und möchte, dass wenn der eine aktiviert ist folgende Funktion ausgeführt wird:

function gewaehlt()
 {
 if(window.document.quiz.auswahl[0].checked == true)
 document.all.antwort0.style.setAttribute("backgroundColor","red", "false");
 }

meine Frage: wie schaff ich es, dass diese Funktion schon beim "anklicken" des Radiobuttons ausgeführt wird? Kann man Radiobuttons mit Event-Handlern benutzen? Oder gibt es eine ganz andere Möglichkeit?

Ich würd mich freuen wenn mir jemand helfen könnte!

[Lukas]

Hi

Versuchs mal mit dem Eventhandler onClick(). Nur so als Hinweis, was geschieht, wenn du danach den zweiten Radiobutton anwählst? Vergiss nicht, den Wert zurückzusetzen, damit beim nächsten Anklicken des ersten Radiobuttons auch wieder was geschieht.

mfG
Lukas

[Andreas]

Hi,

onClick oder onMousedown funktioniert mittlerweile bei fast allen Tags... Aber wenn Du sicher gehen willst, dass es auch immer funktioniert:

http://az.softengine.de/selfhtml/javascript/sprache/eventhandler.htm#onclick

Ciao
Andreas

[firebrain]

schau:

<input type="Radio" onclick="alert();">

einfach statt alert funktionsaufruf rein und fertig...

greez

firebrain

[Struppi]

Hallo!

ich hab eine Frage zu Radiobuttons. ich hab zwei Stück und möchte, dass wenn der eine aktiviert ist folgende Funktion ausgeführt wird:

function gewaehlt()
{
if(window.document.quiz.auswahl[0].checked == true)
document.all.antwort0.style.setAttribute("backgroundColor","red", "false");
}

Das ist IE 4. Syntax dass läuft in den meisten Browsern nicht.

<input type="radio" onclick="gewaehlt(this);">

function gewaehlt(e)
{
e.style.backgroundColor = "red";
}

Struppi.

[lousypoetry]

Das ist IE 4. Syntax dass läuft in den meisten Browsern nicht.
<input type="radio" onclick="gewaehlt(this);">
function gewaehlt(e)
{
e.style.backgroundColor = "red";
}

jau danke euch, mit onClick gehts und dank der anderen syntax auch in anderen browsern!

@struppi:
noch mal ne frage zu der syntax, was hat denn das mit dem 'e' aufsich? Und wieso muss es dann später onClick="gewaehlt(this);"
                         ^^^^
heißen?

[Andreas]

Hi,

das "e" ist ein Parameter, den die Funktion (jetzt) erwartet. Mit "this" wird eine Instanz des aktuellen Objekts übergeben. Somit befindet sich das Objekt des Radio-Buttons in der Variable "e" und Du kannst Dir die lange Syntax sparen und dabei sogar kompatibel zu den meisten Browsern bleiben.

Ciao
Andreas

[lousypoetry]

das "e" ist ein Parameter, den die Funktion (jetzt) erwartet. Mit "this" wird eine Instanz des aktuellen Objekts übergeben. Somit befindet sich das Objekt des Radio-Buttons in der Variable "e" und Du kannst Dir die lange Syntax sparen und dabei sogar kompatibel zu den meisten Browsern bleiben.

oha... ich glaub, das ist ne spur zu heftig für mich, aber ich nehme es mal so zur kenntnis ;)

aber jetzt hab ich leider wieder ein problem, denn eigentlich soll das ganze mit einer if-abfrage verbunden werden, so ungefähr:

function gewaehlt(e)
 {
  if(window.document.quiz.auswahl[0].checked == true)
  e.document.all.antwort1.style.backgroundColor = "red";
 else
 if(window.document.quiz.auswahl[2].checked == true)
  e.document.all.antwort2.style.backgroundColor = "red";
 }

leider funktioniert die funktion so nicht und im Moment bin ich etwas damit überfordert, weil ich das mit dem e als Parameter irgendwie noch nicht so ganz blicke, werd mal versuchen n bisschen nachzulesen. hat vielleicht jemand eine Idee, wie meine if-abfrage richtig heißen muss? Danke!

[Andreas]

Hi,

okay, ich glaub' Dir auf's Wort, dass Du grad' Bahnhof verstehst :o) Aber um Dir hier zu helfen, brauche ich noch ein etwas konkreteres Beispiel - also in etwa alle betroffenen HTML-Elemente und JS-Funktionen. Sonst rate ich mir hier den Wolf...das kann ewig dauern...

Ciao
Andreas

[Struppi]

aber jetzt hab ich leider wieder ein problem, denn eigentlich soll das ganze mit einer if-abfrage verbunden werden, so ungefähr:

die brauchst du nicht mehr, da du ja mit den onclick event schon weißt, das der Radiobutton checked ist.

function gewaehlt(e)
{
  if(window.document.quiz.auswahl[0].checked == true)
  e.document.all.antwort1.style.backgroundColor = "red";
else
if(window.document.quiz.auswahl[2].checked == true)
  e.document.all.antwort2.style.backgroundColor = "red";
}

Ach du willst nicht den Radiobutoon einfärben, ist mein Ansatz falsch.
Du musst eine Verbndung vom Radio Button zum antwort Element herstellen, am besten mit dem value.

HTML
<input type="radio" name="r" value="antwort1" onclick="gewaehlt(this);">
<input type="radio" name="r" value="antwort2" onclick="gewaehlt(this);">
<input type="radio" name="r" value="antwort3" onclick="gewaehlt(this);">

function gewaehlt(e)
{
var obj = document.getElementByName(e.value);
if(obj) obj.style.backgroundColor = "red";
}

oder getElementById je nach dem.

Struppi.

[lousypoetry]

Ach du willst nicht den Radiobutoon einfärben, ist mein Ansatz falsch.

Nee, ich hab zwei Formularfelder, die jenachdem welcher button aktiviert ist gefärbt werden sollen.

Du musst eine Verbndung vom Radio Button zum antwort Element herstellen, am besten mit dem value.

HTML
<input type="radio" name="r" value="antwort1" onclick="gewaehlt(this);">
function gewaehlt(e)
{
var obj = document.getElementByName(e.value);
if(obj) obj.style.backgroundColor = "red";
}

Okay, das mit der Verbindung leuchtet mir ein. Aber noch mal zu der Funktion:
ich versteh das irgendwie nicht ganz, um ehrlich zu sein gar nicht. :( ich hab eine variable obj die auf den value zurückgreift. die bleibt also wirklich so stehen oder muss ich da jetzt was austauschen? wenn dieser value erfüllt ist, dann obj.style.backgroundColor = "red"; (wieso denn obj.?)  - ähm, irgendwie fehlt da ne entscheidende stelle in meinen gedanken... :-/

[Andreas]

Hi,

genau das meine ich - poste doch einfach mal einen kompletten Ausschnitt der Seite, damit wir das alle raffen und nicht raten müssen...

Ciao
Andreas

[lousypoetry]

Hi,

genau das meine ich - poste doch einfach mal einen kompletten Ausschnitt der Seite, damit wir das alle raffen und nicht raten müssen...

okay, ich versuchs mal:
<style type="text/css">
<!--
 #antwort {background-color:blue;
    color:white;
    font-weight:bold;
    font-family:Arial;
    font-size:12;}
-->
</style>

<input name="antwort1" id="antwort" size=25>
<input name="antwort2" id="antwort" size=25>

<input type="radio" name="auswahl" value="a1">1
<input type="radio" name="auswahl" value="a2">2

"antwort1" und "antwort2" sind also blau gefärbt und wenn die radiobuttons "a1" oder "a2" angeklickt werden, soll ich "antwort1" oder eben "antwort2" rot färben. Joa, das ist es eigentlich was mit so kopfzerbrechen bereitet :)

[Andreas]

Hi,

okay, ich versuchs' nochmal...:

<html>
<head>
<style type="text/css">
<!--
 .antwort {background-color:blue;
    color:white;
    font-weight:bold;
    font-family:Arial;
    font-size:12;}
-->
</style>
<script language="javascript">
function antwort(){
  if(document.formular.auswahl[0].checked){
    document.getElementById('antwort1').style.backgroundColor='red';
    document.getElementById('antwort2').style.backgroundColor='blue';
  }else{
    document.getElementById('antwort1').style.backgroundColor='blue';
    document.getElementById('antwort2').style.backgroundColor='red';
  }
}
</script>
</head>
<body>
<form name="formular">
<input name="antwort1" id="antwort1" class="antwort" size=25><br>
<input name="antwort2" id="antwort2" class="antwort" size=25><br>
<input type="radio" name="auswahl" value="a1" onclick="antwort()">1<br>
<input type="radio" name="auswahl" value="a2" onclick="antwort()">2
</form>
</body>
</html>

Das hat zu funktionieren.

Ciao
Andreas

[lousypoetry]

Das hat zu funktionieren.

das funktioniert tatsächlich! Besten Dank für die (geduldige) Hilfe :))

[Struppi]

HTML
<input type="radio" name="r" value="antwort1" onclick="gewaehlt(this);">
function gewaehlt(e)
{
var obj = document.getElementByName(e.value);
if(obj) obj.style.backgroundColor = "red";
}

Okay, das mit der Verbindung leuchtet mir ein. Aber noch mal zu der Funktion:
ich versteh das irgendwie nicht ganz, um ehrlich zu sein gar nicht. :( ich hab eine variable obj die auf den value zurückgreift. die bleibt also wirklich so stehen oder muss ich da jetzt was austauschen? wenn dieser value erfüllt ist, dann obj.style.backgroundColor = "red"; (wieso denn obj.?)  - ähm, irgendwie fehlt da ne entscheidende stelle in meinen gedanken... :-/

e ist eine Referenz auf den Radiobutton, dessen value der Name des einzufärbenden  Elementes ist. in obj speicherst du die Referenz von dieserm Value und danach überprüfst du ob das geklappt hat. Es ist allgemien immer sinnvoll zu testen ob das was du machen willst auch funktioniert.

Struppi.