Checkboxen prüfen

[Hakaisha]

Hallo ich habe ein LottoSpiel am laufen und gerade bin ich dabei die Zahlen über checkboxen zu übertragen. Jetzt muss ich testen, ob auch wirklich 6 Zahlen eingetippt wurden oder nicht. Wenn weniger als 6 oder mehr als 6 angeklickt wurden soll eine Fehlermeldung über Javascript ausgegeben werden.

MFG: Hakaisha

[gast42]

Wo ist dein Problem?

[EKKi]

Mahlzeit Hakaisha,

Wenn weniger als 6 oder mehr als 6 angeklickt wurden soll eine Fehlermeldung über Javascript ausgegeben werden.

Die entsprechende serverseitige Überprüfung hast Du hoffentlich schon fertig (schließlich ist Javascript abschaltbar, Javascript-Code manipulierbar und es gilt - wie immer - "ALL INPUT IS EVIL!" ... d.h. Du kannst und darfst Dich auf NICHTS verlassen, was irgendein ein Client Dir schickt) - dann nimm diesen Code doch einfach als Vorlage und bau so etwas ähnliches auch in Javascript.

Wo ist dein Problem?

MfG,
EKKi

[Don P]

Hallo,

Hallo ich habe ein LottoSpiel am laufen und gerade bin ich dabei die Zahlen über checkboxen zu übertragen. Jetzt muss ich testen, ob auch wirklich 6 Zahlen eingetippt wurden oder nicht. Wenn weniger als 6 oder mehr als 6 angeklickt wurden soll eine Fehlermeldung über Javascript ausgegeben werden.

Einfach einen Zähler "getippt" mitlaufen lassen:

  
var getippt = 0;  

Die Checkboxen im "tippFormular" holst du z.B. mit http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=document.getElementsByTagname in ein Array "checkBoxen" und setzt für jede einen event-Handler http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=onchange (=beim Ändern):

  
var chkBoxen = document.tippFormular.getElementsByTagname("input")  
do {  
  chkBoxen.shift().onchange = function () { if (this.checked) {getippt++} else {getippt--} }  
  
} while(chkBoxen.length)  

Am Ende fragst du ab:

  
if(getippt != 6 ) alert("sie müssen 6 Zahlen tippen!")  

(ungeprüft)

Gruß, Don P

[molily]

var chkBoxen = document.tippFormular.getElementsByTagname("input")
do {
  chkBoxen.shift().onchange = function () { if (this.checked) {getippt++} else {getippt--} }

} while(chkBoxen.length)

Deine Bemühungen, neue, kreative und ausgefallene Möglichkeiten zu finden, Listen in JavaScript zu durchlaufen, in allen Ehren - aber der Rückgabewert von getElementsByTagName ist kein echter Array, sondern ein NodeList-Objekt, und hat keine shift-Methode.

Diese Liste ist »live«, d.h. sie gibt bei jedem Zugriff darauf immer den aktuellen Status des DOMs wieder. Sie ist also bewusst kein Array, denn eine programmseitige Veränderbarkeit würde bei einer Liste, die sich selbst ändert, zu Verwirrung führen. Eine Konvertierung in einen statischen Array nur zum Durchlaufen macht genausowenig Sinn.

Außerdem sei auf die schöne, seit JavaScript 1.0 existente Liste http://de.selfhtml.org/javascript/objekte/elements.htm@title=elements hingewiesen, mit der man alle Felder eines Formulars durchlaufen kann. Der Einfachheit halber würde ich zu einer stinknormalen for-Schleife raten. Die ist zwar nicht immer am elegantesten, aber damit macht man zumindest nichts falsch.

Übrigens würde ich die Handlerfunktion nicht gerade innerhalb der Schleife notieren - damit wird sie immer wieder erzeugt anstatt nur einmal.

Mathias

[molily]

var chkBoxen = document.tippFormular.getElementsByTagname("input")
do {
  chkBoxen.shift().onchange = function () { if (this.checked) {getippt++} else {getippt--} }

} while(chkBoxen.length)

Das ist ja ein klassischer Anwendungsfall von Event Delegation. Anstatt change würde ich hier das aufsteigende Ereignis click verwenden, der feuert, sobald sich der Checked-Status, nicht erst, sobald sich der Status ändert *und* das Feld den Fokus verliert.

Das hatte ich mal hier demonstriert:
</archiv/2009/4/t185411/#m1230482>
http://molily.de/temp/checkboxLimit.html

Was ich damit sagen will:
Es ist weniger die Frage, wie man diese Knotenliste durchläuft, sondern ob man es überhaupt tun muss. ;)

Mathias

[Don P]

Hallo,

Das ist ja ein klassischer Anwendungsfall von Event Delegation. Anstatt change würde ich hier das aufsteigende Ereignis click verwenden, der feuert, sobald sich der Checked-Status, nicht erst, sobald sich der Status ändert *und* das Feld den Fokus verliert.

Das hatte ich mal hier demonstriert:
</archiv/2009/4/t185411/#m1230482>
http://molily.de/temp/checkboxLimit.html

Was ich damit sagen will:
Es ist weniger die Frage, wie man diese Knotenliste durchläuft, sondern ob man es überhaupt tun muss. ;)

Ja, mit der Event Delegation hast du natürlich recht und mir ist das anschließend auch aufgefallen, genau wie das Herausnehmen der Handler-Funktion aus der Schleife. Beim Checken hätte ich wohl auch die Sache mit der nicht vorhandenen shift-Methode bemerkt.

Wobei der onchange-Event nicht wirklich falsch ist: Erst wenn das Feld den Fokus verliert, ist der Status definitiv gesetzt. Wenn ein Benutzer dieselbe Checkbox mehfach hintereinander aktiviert/deaktiviert ohne dass sich der Fokus ändert, weil er vielleicht unentschlossen ist, ob er wirklich so tippen soll, dann muss der Zähler diese Kapriolen ja nicht alle mitmachen.

Meine Anwort war einfach ein nicht näher geprüfter Schnellschuss, da ich nicht wollte, dass man den Fragesteller gleich abwürgt, nur weil die Frage vielleicht ein bisschen unpräzise war. Die ungefähre Richtung habe ich immerhin gezeigt. Da keine weiteren Fragen dazu kamen, war es für mich erstmal erledigt.

Gruß, Don P

[molily]

Das ist ja ein klassischer Anwendungsfall von Event Delegation. Anstatt change würde ich hier das aufsteigende Ereignis click verwenden, der feuert, sobald sich der Checked-Status, nicht erst, sobald sich der Status ändert *und* das Feld den Fokus verliert.

Fürs Archiv:
Man könnte auch neim change-Event bleiben und in hinreichend fähigen Browsern mit Event Capturing arbeiten.
https://forum.selfhtml.org/?t=186173&m=1236348

Mathias

[Don P]

Hallo,

Das ist ja ein klassischer Anwendungsfall von Event Delegation. Anstatt change würde ich hier das aufsteigende Ereignis click verwenden, der feuert, sobald sich der Checked-Status, nicht erst, sobald sich der Status ändert *und* das Feld den Fokus verliert.

Das ganze Event-Capturing und Event-Bubbling ist Cross-Browser-mäßig schon etwas kompliziert.
Im vorliegenden Fall (OP) mit 49 Checkboxen, von denen genau 6 aktiviert sein sollen, geht es mit dem click-Event wohl am einfachsten so:

  
      var getippt = 0,  
          tippFeld = document.getElementById('Tippfeld');  
  
      tippFeld.onclick = function(e) {  
  
        e = e||event;  
        var elt = e.target||e.srcElement;  
        if( (elt.type && elt.type.toLowerCase()==='checkbox') ){elt.blur(); getippt += (elt.checked||-1); }  
      }  

Hier setzte ich voraus, dass alle Checkboxen in einem Container mit der id "Tippfeld" liegen und anfangs deaktiviert sind.
Die Variable "getippt" enthält dann immer die aktuelle Anzahl aktivierter Checkboxen.

Gruß, Don P

[peterS.]

gruss Hakaisha,

... Wenn weniger als 6 oder mehr als 6 angeklickt wurden,
soll eine Fehlermeldung über Javascript ausgegeben werden.

das ist in diesem fall gar nicht mal notwendig, da ein
ansprechend *gestyltes* formular diese art der rueckmeldung
einfach durch verhaltensaenderung uebernehmen kann.

und damit ich mich nicht pausenlos wiederhole, verweise ich
diesmal auf die erklaerungen einer zu obiger problemstellung
aehnlichen loesung.

der thread im archiv lautet: »WENN alle Checkboxen geklickt DANN zeige«;
das relevante posting, welches die erklaerungen und loesungen
zu dem hier diskutierten problem enthaelt hoert auf den abstrakten
titel: »bsp.-hafte umsetzung + UI/DOM-Controller-Patterns im allgemeinen«.

in dem zuletzt verlinktem posting - zitat:

» ...bediene ich mich erstens der von mir so oft angepriessenen
  array-methoden aus mozillas JavaScript releases 1.6 bis 1.8.
  in den allermeisten faellen laesst sich damit recht zuegig *sprechender*
  code erzeugen.

zweiter schwerpunkt ist ein wiederverwertbares controller-muster, wie
  es permanent im dom-scripting dort zum einsatz kommen kann, wo programm-
  logik auf nutzer-eingaben reagieren muss.« (zitatende)

schlussendlich gibt es jetzt noch als *proof of concept* das alte, in 10
minuten auf neu und nach den hier geforderten kriterien umgebaute beispiel:

http://pseliger.de/testCases/selfhtml-forum-hilfe-demo-LottoNumbersController.html

so long - peterS. - [e-mail]