Beispiel:
|
|
Radioknöpfe bilden immer eine Gruppe mit mindestens zwei Knöpfen, von denen jeweils nur einer ausgewählt sein kann.
Die Knöpfe, die zu einer Gruppe gehören, haben den gleichen Namen. Intern werden die Knöpfe nach ihrem auftreten im Quelltext von 0 an durchnummeriert. Über diese Nummer lassen sie sich abfragen.
In obigen Beispiel wird der erste Knopf so dargestellt:
<input name="auswahl" type="radio" value="a1" checked onClick="textsetzen()">
Der verbindende Name ist "auswahl". Das Attribut checked legt fest, dass beim Start der Seite dieser Knopf ausgewählt erscheint. Über das Event onClick wird die Funktion "textsetzten()" aufgrufen, die sich um die weitere Behandlung des Ereignisses kümmert.
Der zweite Knopf wird genau wie der erste dargestellt, nur das Attribut checked fällt weg.
In der Funktion "textsetzten()", die bei jedem Klick auf einen Knopf der Gruppe aufgerufen wird, muss abgefragt werden, welcher Knopf gesetzt ist:
var knopf=document.getElementsByName('auswahl');
if (knopf[0].checked) {
var text="Auswahl 1 ist gewählt";
} else {
var text="Auswahl 2 ist gewählt";
}
document.getElementById('anzeigetext').value=text;
Die Variable knopf hat die verbindung zu allen Knöpfen mit dem Namen auswahl. Die Zahl in der eckigen Klammer ist die Nummer des Knopfes.
Sind mehrere Knöpfe vorhanden, kann man die Abfrage auch in einer Schleife realisieren.
var i;
var knopf=document.getElementsByName('auswahl');
for(i = 0; i < knopf.length; i++) {
if(knopf[i].checked) {
gesetzt=i+1;
}
} text="Auswahl "+gesetzt+" ist gewählt"; document.getElementById('anzeigetext').value=text;
Mit knopf.length wird die Anzahl der vorhanden Knöpfe in dieser Gruppe bestimmt. Die Schleife fragt jeden einzelnen Knopf ab.
Beispiel:
|
|
Die beiden Kontrollkästchen gehören nicht zusammen und können unabhängig voneinader gesetzt und gelöscht werden.
Ein Kästchen wird so dargestellt:
<input id="kasten1" type="checkbox" value="" onClick="kontrolle_setzen()">
Ähnlich wie bei den Radioknöpfen kann durch das Attribut checked ein Kästchen beim Start der Seite gesetzt werden.
In der aufgerufenen Funktion werden die Kästchen wieder abgefragt und das Textfeld entsprechend gefüllt.
function kontrolle_setzen() {
var gesetzt1='';
var gesetzt2='';
var kasten1=document.getElementById('kasten1');
var kasten2=document.getElementById('kasten2');
if (kasten1.checked) {
gesetzt1=1;
}
if (kasten2.checked) {
gesetzt2=2;
}
document.getElementById('text2').value="Gesetzt: "+gesetzt1+" "+gesetzt2;
}
Im Kopfrechenprogramm können z.B. der Schwierigkeitsgrad oder die Anzahl der abgefragten Grundrechenarten durch Knöpfe oder Kontrollfelder eingestellt werden. In der Start-Funktion werden diese dann abgefragt und die Aufgaben entsprechend den Einstellungen erstellt.