Java Script: Wenn INPUT ausgewählt dann...

[Rundi]

Hey Leute, ich habe eine Frage an euch:

Ich mache aktuell eine kleine Umfrage in HTML und ich benötige noch einen wichtigen Punkt. Ich benötige ein Java Script das aus einer Anzahl von Input-feldern das ausgewählte erkennt und nur die Value des ausgewählten Input-feldes in eine richtige Zahl umwandelt.

<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort1 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort2 
<input type="radio" id="AG01" name="Aufgabe1" value="0"> Antwort3 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort4

also wenn ich Antwort1 auswähle das das JavaScript nur bei dem ausgewählten die Value in eine richtige zahl umwandelt. Ich habe vieles Versucht aber ich bekomme keine Bedingung hin. Ich hoffe ihr könnt mir helfen.

Ich habe die Value Umwandlung immer mit

pasreInt()

gemacht

[Matthias Apsel]

Hallo Rundi,

Ich mache aktuell eine kleine Umfrage in HTML und ich benötige noch einen wichtigen Punkt. Ich benötige ein Java Script das aus einer Anzahl von Input-feldern das ausgewählte erkennt und nur die Value des ausgewählten Input-feldes in eine richtige Zahl umwandelt.

zur Laufzeit oder nach dem Absenden des Formulars?

<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort1 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort2 
<input type="radio" id="AG01" name="Aufgabe1" value="0"> Antwort3 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort4

Eine ID darf es nur ein einziges Mal in einem Dokument geben.

Wenn das Formular abgesendet werden soll, wird ohnehin nur der ausgewählte value übertragen, anderenfalls ist JavaScript/.../checked dein Freund.

Bis demnächst
Matthias

[Rundi]

[Vollzitat]

Ja ich habe es gerade auch gesehen das ich die ID's nicht unterschiedlich geschrieben habe. Ich bitte das zu entshuldigen. Und um deine erste Frage zu beantworten das Script soll durch einen Button aktiviert werden der den jeweiligen JavaScript "startet" und die values umwandelt.

[Felix Riesterer]

Lieber Rundi,

das Script soll durch einen Button aktiviert werden der den jeweiligen JavaScript "startet" und die values umwandelt.

wozu? Was genau willst Du denn erreichen? Mir scheint nämlich, dass dieses Vorgehen keinen Sinn hat!

Liebe Grüße,

Felix Riesterer.

[Rundi]

wozu? Was genau willst Du denn erreichen? Mir scheint nämlich, dass dieses Vorgehen keinen Sinn hat!

Ich brauche einfach nur eine JavaScript-Bedingung die erkennt ob ein Input ausgewählt ist. Lasst den Sinn meine sorge sein. :)

[Der Martin]

Hallo,

Lieber Rundi,

[Vollzitat gelöscht]

Felix Riesterer.

bitte zitiere sinnvoll, nicht einfach das gesamte Vorposting.

Ich brauche einfach nur eine JavaScript-Bedingung die erkennt ob ein Input ausgewählt ist. Lasst den Sinn meine sorge sein. :)

Dann erkläre für mein Verständnis bitte nochmal eindeutig, was du mit ausgewählt meinst: Focussiert (aktives Eingabefeld) oder markiert (Kreuzchen, Haken)?
Falls letzteres, frage einfach die checked-Eigenschaft der input-Elemente ab, wie es Matthias schon empfohlen hat.

So long,
 Martin

[Der Martin]

Hallo,

anderenfalls ist JavaScript/.../checked dein Freund.

das war wohl mein entscheidendes Missverständnis: Ich hatte "ausgewählt" als "focussiert" verstanden.

Ciao,
 Martin

[Linuchs]

<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort1 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort2 
<input type="radio" id="AG01" name="Aufgabe1" value="0"> Antwort3 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort4

also wenn ich Antwort1 auswähle ...

wie?

Vier mal die id="AG01" - wie unterscheidest du die?

[Der Martin]

Hallo,

Ich mache aktuell eine kleine Umfrage in HTML und ich benötige noch einen wichtigen Punkt. Ich benötige ein Java Script das aus einer Anzahl von Input-feldern das ausgewählte erkennt und nur die Value des ausgewählten Input-feldes in eine richtige Zahl umwandelt.

ich bin mir nicht sicher, aber ich habe das Gefühl, du hast dich in etwas verrannt, was auf andere Weise vielleicht eleganter und einfacher geht.

Anyway, mit Javascript lässt sich leider nicht so ohne weiteres abfragen, ob ein bestimmtes Element den Focus hat. Es gibt wohl das Event focus, das immer dann feuert, wenn "sein" Element den Focus bekommt. Man müsste also an alle in Frage kommenden Elemente einen Eventhandler hängen, der den Focuswechsel mitprotokolliert. Und zusätzlich noch einen Handler für das blur-Event, damit man auch erkennt, dass keines der betrachteten Elemente mehr den Focus hat.

<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort1 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort2 
<input type="radio" id="AG01" name="Aufgabe1" value="0"> Antwort3 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort4

Das ist ungültiges HTML: Eine bestimmte ID darf nur einmal in einem Dokument vorkommen.

Ich habe die Value Umwandlung immer mit

pasreInt()

gemacht

Ja, das ist wohl die sauberste Methode.

So long,
 Martin

[Felix Riesterer]

Lieber Rundi,

etwas mehr Kontext wäre hilfreich.

<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort1 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort2 
<input type="radio" id="AG01" name="Aufgabe1" value="0"> Antwort3 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort4

Keine <label>? Wenn man auf "AntwortX" klickt, wird nicht der zugehörige Radio-Button aktiviert.

Mehrfach verwendete IDs? Das verstößt grob gegen die Spezifikation! id=!AG01-1" bis id="AG01-4 könnte helfen.

also wenn ich Antwort1 auswähle das das JavaScript nur bei dem ausgewählten die Value in eine richtige zahl umwandelt.

Bedenke: Ameisen haben drei linke Beine! Oder anders ausgedrückt: WTF? Wovon sprichst Du?

Ich habe vieles Versucht aber ich bekomme keine Bedingung hin.

Eine Bedingung? So wirklich mit if und so? Warum nicht?

Ich hoffe ihr könnt mir helfen.

So jedenfalls noch nicht.

Ich habe die Value Umwandlung immer mit

pasreInt()

gemacht

Das ist kein gültiger HTML-Code und die vermutlich gemeinte JavaScript-Methode lautet parseInt (Wiki dazu).

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo

<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort1 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort2 
<input type="radio" id="AG01" name="Aufgabe1" value="0"> Antwort3 
<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort4

auf die mehrfache Verwendung der selben ID wurdest du ja schon hingewiesen.

Um zu ermitteln, welcher Knopf gedrückt wurde, musst du zuerst die Radio-Buttons finden:

var radio = document.querySelectorAll("input[type=radio]");

Danach musst du bei allen Fundstücken das "checked"-Attribut abfragen:

for(var i=0;i<radio.length;i++) console.log(i+": "+radio[i].checked);

Gruß
Jürgen

[Rundi]

Sorry wegen der ID's.

<input type="radio" id="AG01" name="Aufgabe1" value="1"> Antwort1 
<input type="radio" id="AG02" name="Aufgabe1" value="1"> Antwort2 
<input type="radio" id="AG03" name="Aufgabe1" value="0"> Antwort3 
<input type="radio" id="AG04" name="Aufgabe1" value="1"> Antwort4

[Rundi]

Ich habe jetzt ein System was mir reicht. Jetzt habe ich das Problem das alle Inputs die ich nicht im Skript Definiert habe dafür sorgen, dass die "Auswertung" nicht arbeitet.

<script type="text/javascript"> 
function counter() {



  if (document.getElementById('AG02a').checked  == true) {
   a = parseInt(AG02a.value) ;
  }

  if (document.getElementById('AG03a').checked  == true) {
   b = parseInt(AG03a.value) ;
  };


x = a + b 
  

document.write("Punkte=  "+ x +"/1")

}

</script>
<head></head>
<body>
<form>
  <fieldset>
	 <legend>Von wann bis wann ging der 1.Weltkrieg?</legend> 
	  <INPUT TYPE="radio" id="AG02a" NAME="frage2" VALUE="1">1914-1918
	  <INPUT TYPE="radio" id="AG02b" NAME="frage2" VALUE="0">1899-1907
	  <INPUT TYPE="radio" id="AG02c" NAME="frage2" VALUE="0">1912-1915
	  <INPUT TYPE="radio" id="AG02d" NAME="frage2" VALUE="0">1915-1919
	  <INPUT TYPE="radio" id="AG02e" NAME="frage2" VALUE="0">1933-1940
  </fieldset>	 
</form>
	<br>
<form>
  <fieldset>
	 <legend>Von wann bis wann ging der 1.Weltkrieg?</legend> 
	  <INPUT TYPE="radio" id="AG03a" NAME="frage3" VALUE="1">1914-1918
	  <INPUT TYPE="radio" id="AG03b" NAME="frage3" VALUE="0">1899-1907
	  <INPUT TYPE="radio" id="AG03c" NAME="frage3" VALUE="0">1912-1915
	  <INPUT TYPE="radio" id="AG03d" NAME="frage3" VALUE="0">1915-1919
	  <INPUT TYPE="radio" id="AG03e" NAME="frage3" VALUE="0">1933-1940
  </fieldset>	 
</form>	
<input type=button value="Auswertung" onClick="counter()">	
	
	
	
</body> 

Wie schaffe ich es das das Skript die anderen Inputs ignoriert? Oder liegt es daran dass das skript die Auswahl nicht bestätigen kann? Hätte jmd eine lösung dafür?

[Der Martin]

Hallo,

Ich habe jetzt ein System was mir reicht.

anscheinend doch nicht ... ;-)

Jetzt habe ich das Problem das alle Inputs die ich nicht im Skript Definiert habe dafür sorgen, dass die "Auswertung" nicht arbeitet.

Ich verstehe beim besten Willen nicht, was du damit meinst. Zwar sehe ich auf Anhieb ein gravierendes Problem in deinem Script, aber trotzdem: Beschreibe bitte etwas genauer, was du meinst.

function counter() {

  if (document.getElementById('AG02a').checked  == true) {
   a = parseInt(AG02a.value) ;
  }

  if (document.getElementById('AG03a').checked  == true) {
   b = parseInt(AG03a.value) ;
  };


x = a + b 

document.write("Punkte=  "+ x +"/1")
}

Erstens:

if (document.getElementById('AG02a').checked == true)

Die checked-Eigenschaft ist schon ein boolescher Wert. Diesen nochmal explizit auf true zu vergleichen, ist zwar nicht schädlich, aber unnötig. Also:

if (document.getElementById('AG02a').checked)

Sieht angenehmer aus und liest sich besser.

Zweitens:

x = a + b

Weder a, noch b, noch x sind irgendwo deklariert. Die werden daher bei der ersten Zuweisung angelegt, und zwar als globale Variablen. Das ist nicht schön, das möchte man normalerweise nicht. Deklariere daher am Anfang der Funktion:

var a, b, x;

Problematisch ist aber, dass a bzw. b gar nicht angelegt werden, wenn die zugeordnete Checkbox nicht markiert ist. Dann erzeugt der Zugriff darauf einen Javascript-Fehler.

Und drittens:

document.write("Punkte= "+ x +"/1")

Das bricht dir vermutlich das Genick. Denn wenn document.write() nach dem Rendern des Dokuments noch aufgerufen wird, dann wird das geladene Dokument durch den neu ausgegebenen Inhalt ersetzt. Du solltest daher lieber das Ergebnis als Inhalt eines dafür vorgesehenen Elements setzen. Dazu eignet sich die innerHTML-Eigenschaft sehr gut.

<head></head>
<body>
<form>
  <fieldset>
	 <legend>Von wann bis wann ging der 1.Weltkrieg?</legend> 
	  <INPUT TYPE="radio" id="AG02a" NAME="frage2" VALUE="1">1914-1918
	  <INPUT TYPE="radio" id="AG02b" NAME="frage2" VALUE="0">1899-1907
	  <INPUT TYPE="radio" id="AG02c" NAME="frage2" VALUE="0">1912-1915
	  <INPUT TYPE="radio" id="AG02d" NAME="frage2" VALUE="0">1915-1919
	  <INPUT TYPE="radio" id="AG02e" NAME="frage2" VALUE="0">1933-1940
  </fieldset>	 
</form>
	<br>
<form>
  <fieldset>
	 <legend>Von wann bis wann ging der 1.Weltkrieg?</legend> 
	  <INPUT TYPE="radio" id="AG03a" NAME="frage3" VALUE="1">1914-1918
	  <INPUT TYPE="radio" id="AG03b" NAME="frage3" VALUE="0">1899-1907
	  <INPUT TYPE="radio" id="AG03c" NAME="frage3" VALUE="0">1912-1915
	  <INPUT TYPE="radio" id="AG03d" NAME="frage3" VALUE="0">1915-1919
	  <INPUT TYPE="radio" id="AG03e" NAME="frage3" VALUE="0">1933-1940
  </fieldset>	 
</form>	
<input type=button value="Auswertung" onClick="counter()">	
</body> 

Tipp: Es ist üblich, Element- und Attributnamen konsequent in Kleinbuchstaben zu schreiben.

Wie schaffe ich es das das Skript die anderen Inputs ignoriert? Oder liegt es daran dass das skript die Auswahl nicht bestätigen kann?

Du sprichst in Rätseln.

So long,
 Martin

[Rundi]

Weder a, noch b, noch x sind irgendwo deklariert. Die werden daher bei der ersten Zuweisung angelegt, und >zwar als globale Variablen. Das ist nicht schön, das möchte man normalerweise nicht. Deklariere daher am >Anfang der Funktion:

var a, b, x;

Problematisch ist aber, dass a bzw. b gar nicht angelegt werden, wenn die zugeordnete Checkbox nicht >markiert ist. Dann erzeugt der Zugriff darauf einen Javascript-Fehler.

Ich habe die Variablen a, b und x defeniert doch jetzt bekomme ich bei einem Nichtaufruf einer Bedingung die Ausgabe NaN (Not a Number) wie kann ich dieses Problem am besten lösen? Ich brauche ja immer nur die Zahl 1 bei den richtigen Antworten. Da 0 bei den anderen Antworten nichts ändert. Aber immer eine Ausgabe von NaN hilft da ja auch nicht.

[Der Martin]

Hi,

Deklariere daher am >Anfang der Funktion:

var a, b, x;

Problematisch ist aber, dass a bzw. b gar nicht angelegt werden, wenn die zugeordnete Checkbox nicht >markiert ist. Dann erzeugt der Zugriff darauf einen Javascript-Fehler.

Ich habe die Variablen a, b und x defeniert

erstens heißt es def_i_niert, und zweitens hast du genau das vermutlich nicht getan, sondern du hast sie mit dem var-Statement nur deklariert, also bekanntgemacht. Davon haben sie aber noch keinen nutzbaren Wert.

doch jetzt bekomme ich bei einem Nichtaufruf einer Bedingung die Ausgabe NaN (Not a Number) wie kann ich dieses Problem am besten lösen?

Indem du den Variablen bei der Deklaration gleich einen sinnvollen Anfangswert gibst, z.B. 0:

var a=0, b=0, x;

So erhalten a und b gleichzeitig mit der Deklaration den Wert 0, x bekommt keinen Startwert. Das ist auch nicht nötig, weil x ja in jedem Fall später einen Wert zugewiesen bekommt.

So long,
 Martin

[Rundi]

Du bist der BESTE! Danke dir :) Jetzt funktioniert es und ich weiß wie Definition geschrieben wird, habe mich nur vertippt. #nobodyisperfect

[Rolf b]

Alles viel zu kompliziert.

Gib dem Form eine Id, z.B. <form id="fragen">.

Dann findest Du alle angehakten Radiobuttons mit

var radios = fragen.querySelectorAll("input[type=radio]:checked");

Das Ergebnis ist leider kein Array, sondern eine NodeList, deshalb kannst Du die reduce-Methode von Array.prototype nicht direkt darauf anwenden, aber man kann es ja per .call zusammenstöpseln:

var punkte = [].reduce.call(radios,
                            function(s, btn) { return s + parseInt(btn.value); },
                            0);

Reduce geht ein Array der Reihe nach durch (in dem Fall das arrayähnliche Objekt NodeList) und ruft dafür die als 2. Parameter übergebene Funktion auf. Diese Funktion bekommt beim ersten mal den 3. Aufrufparameter von reduce, hier also 0, und für alle weiteren Aufrufe die Rückgabe vom vorigen Aufruf. Die obige Zeile addiert also die Values aller Radiobuttons auf, die in der radios-NodeList stehen.

Hier ist ein Beispiel: fiddle

[Rolf b]

Ich habe nochmal rumgesucht - und muss von der Methode abraten, ein Element mit ID über eine globale Variable anzusprechen. Das ist zwar mittlerweile sogar Standard, aber keine robuste Programmierung. Besser ist document.getElementById().

[Matthias Apsel]

Hallo Rolf b,

Alles viel zu kompliziert.

Gib dem Form eine Id, z.B. <form id="fragen">.

Dann findest Du alle angehakten Radiobuttons mit

var radios = fragen.querySelectorAll("input[type=radio]:checked");

Alles viel zu kompliziert. ;-)

alle angehakten Radiobuttons findet man auch durch

var radios = document.querySelectorAll("input[type=radio]:checked");

Alles viel zu fehleranfällig. ;-)

Natürlich findet man jetzt auch die Radios, die nicht in diesem Formular stecken.

Aber:
Darf man sich wirklich darauf verlassen, dass aus einer HTML-ID automatisch ein entsprechendes JavaScript-Objekt wird?

Bis demnächst
Matthias

[Rolf b]

Wie eben von mir ergänzt: Man darf, aber sollte nicht. "Named access to the window object" ist zwar definiert, findet aber viel mehr als nur Elemente mit ID. Das zu standardisieren, statt es zu deprecaten, war ein Hirnfurz von WhatWG oder W3C, wenn du mich fragst. Ich hatte das nur vom OP aufgepickt, fand es erstmal schlau (weil ich es nicht kannte) und habe dann erst recherchiert. Wie kann man in einem "Standard" schreiben: Kann man machen, ergibt aber zerbrechlichen (brittle) Code...

Besser also:

var radios = document.querySelectorAll("#fragen input[type=radio]:checked");

Rolf

[MudGuard]

Hi,

  if (document.getElementById('AG02a').checked  == true) {
   a = parseInt(AG02a.value) ;
  }

zusätzlich zu Martins Sachen: wo kommt das AG02a her? Sollte das document.getElementById('AG02a').value sein?

cu,
Andreas a/k/a MudGuard

[Rolf b]

Elemente mit ID sind unter diesem Variablennamen ansprechbar. Das war mal ein IE Addon und ist in HTML zum Standard geworden (7.3.3 in https://html.spec.whatwg.org) - aber immerhin raten sie gleich wieder davon ab.

[MudGuard]

Hi,

Elemente mit ID sind unter diesem Variablennamen ansprechbar. Das war mal ein IE Addon

Dieses Ärgernis war mir bekannt.

und ist in HTML zum Standard geworden (7.3.3 in https://html.spec.whatwg.org)

Jenes Ärgernis war mir nicht bekannt.

Dazu kam noch, daß Rundi eine Zeile weiter oben auf die "richtige" Art (document.getElementById) auf das Element zugreift ...

aber immerhin raten sie gleich wieder davon ab.

dann hätten sie es doch gleich weglassen können ...

cu,
Andreas a/k/a MudGuard