Formular: Mehrere ids gleichzeitig anzeigen/verstecken

[Christian]

Hallo,

ich habe einen Online-Fragebogen erstellt. Dieser funktioniert bisher so, daß abhängig von der Auswahl des Befragten, Antwortfelder komplett ausgeblendet werden, bzw. zusätzliche Möglichkeiten hinzu kommen.
Ich habe hierzu die Abschnitte, die dynamisch sein sollen als <div> definiert.
Jetzt würde ich gerne, abhängig von der Antwort auf eine bestimmte Frage, an mehreren Punkten im Fragebogen entweder die eine oder die andere Variante der jeweiligen Frage anzeigen.
Also wenn der Benutzer Button 1 auswählt, soll an sämtlichen Stellen im Text die Variante A angezeigt werden.

<div id=varianteA>Variante A</div>
<div id=varianteB>Variante B</div>
<input.....>
.
.
.
<div id=varianteA>Variante A</div>
<div id=varianteB>Variante B</div>
<input.....>

Leider scheint es nicht möglich zu sein, ids mit gleichem Namen an mehreren Stellen im Dokument zu verwenden und diese auch alle gleichzeitig zu verändern. Bei mir wird nämlich immer nur dort wo die id zum ersten Mal auftritt die Veränderung vorgenommen. Die restlichen bleiben unverändert. Ich könnte jetzt natürlich für jeden Punkt eine eigene id benutzen und diese dann auf einen Schlag verändern. Aber es muß doch auch anders gehen.

Hier noch der von mir benutzte Script-Teil. Den habe ich aus einem Tutorial auf der Apple Website.

<script type="text/javascript">
<!--

function changeDiv(the_div,the_change)
{
  var the_style = getStyleObject(the_div);
  if (the_style != false)
  {
    the_style.display = the_change;
  }
}

function getStyleObject(objectId) {
  if (document.getElementById && document.getElementById(objectId)) {
    return document.getElementById(objectId).style;
  } else if (document.all && document.all(objectId)) {
    return document.all(objectId).style;
  } else {
    return false;
  }
}
// -->
</script>

Ich hoffe, mir kann jemand helfen.

Gruß
Chris

[Andreas Dölling]

Hallo,

Leider scheint es nicht möglich zu sein, ids mit gleichem Namen an mehreren Stellen im Dokument zu verwenden und diese auch alle gleichzeitig zu verändern.

das ist der Sinn von IDs! Sie ermöglichen die Identifizierung eines Knotens und müssen folglich eindeutig sein.
;)

Du könntest Dir aber auf andere Weise behelfen:

1. Du arbeitest statt mit den IDs mit den CSS-Klassennamen (ist semantisch nicht ganz sauber, geht aber sehr gut).
2. Du benutzt nicht identische IDs, sondern IDs mit demselben Präfix oder Suffix, also so etwas wie "fragegruppeA_0", "fragengruppeA_1", ..., "fragengruppeA_n" etc.

Hilft Dir das weiter?

Ciao,
Andreas

[Christian]

Du könntest Dir aber auf andere Weise behelfen:

1. Du arbeitest statt mit den IDs mit den CSS-Klassennamen (ist semantisch nicht ganz sauber, geht aber sehr gut).

Und wie frage ich diesen Klassennamen dann ab? Geht das auch mit getElementById() ?

2. Du benutzt nicht identische IDs, sondern IDs mit demselben Präfix oder Suffix, also so etwas wie "fragegruppeA_0", "fragengruppeA_1", ..., "fragengruppeA_n" etc.

In dem Fall müsste ich dann wohl eine Funktion erstellen, die dann entsprechend fragegruppeA_[0-n] abfragt? Puuh, mit Javascript kenne ich mich nicht sehr gut aus. Aber mal sehen...

Hilft Dir das weiter?

Aber klar doch! Vielen Dank!

Gruß
Chris

[Andreas Dölling]

Hallo,

1. Du arbeitest statt mit den IDs mit den CSS-Klassennamen (ist semantisch nicht ganz sauber, geht aber sehr gut).

Und wie frage ich diesen Klassennamen dann ab? Geht das auch mit getElementById() ?

Nein, das geht mit der Eigenschaft className (siehe < http://de.selfhtml.org/javascript/objekte/all.htm#class_name>).

2. Du benutzt nicht identische IDs, sondern IDs mit demselben Präfix oder Suffix, also so etwas wie "fragegruppeA_0", "fragengruppeA_1", ..., "fragengruppeA_n" etc.

In dem Fall müsste ich dann wohl eine Funktion erstellen, die dann entsprechend fragegruppeA_[0-n] abfragt?

Ganz genau (analog würdest Du bei der Variante mit den Klassennamen vorgehen).
Das ist aber gar nicht so wild. Mit document.getElementsByTagName() kannst Du Dir z.B. schon einmal eine Kollektion aller in Frage kommenden Knoten holen, also z.B. alle P-Elemente.
Diese Kollektion durchläufst Du dann in einer for-Schleife und fragst bei jedem Element ab, ob die ID ein bestimmtes Format hat.
Hier könnte < http://de.selfhtml.org/javascript/objekte/string.htm#index_of> helfen.

Viel Erfolg!

Ciao,
Andreas

[Christian]

Hallo,

so, ich habe jetzt folgendes ausprobiert. Leider verschwinden alle Nummerierungen, die durch die <li> eigentlich erzeugt werden müssten, sobald ich die Funktion ausführe.

function zeit() {
  for (var i = 0; i < document.getElementsByTagName("li").length; i++) {

document.getElementsByTagName("li")[i].style.display = "block";
      document.getElementsByTagName("li")[i].style.listStyleType = "decimal";
 }
}

[Christian]

Hallo,

so, ich habe jetzt folgendes ausprobiert. Leider verschwinden alle Nummerierungen, die durch die <li> eigentlich erzeugt werden müssten, sobald ich die Funktion ausführe.

function zeit() {
  for (var i = 0; i < document.getElementsByTagName("li").length; i++) {

document.getElementsByTagName("li")[i].style.display = "block";
      document.getElementsByTagName("li")[i].style.listStyleType = "decimal";
}
}

Problem gelöst. Das ganze darf nicht

document.getElementsByTagName("li")[i].style.display = "block";

heißen, sondern

document.getElementsByTagName("li")[i].style.display = "list-item";

[molily]

Hallo,

Du könntest Dir aber auf andere Weise behelfen:

1. Du arbeitest statt mit den IDs mit den CSS-Klassennamen (ist semantisch nicht ganz sauber, geht aber sehr gut).

Ähnliche Elemente bekommen dieselbe Klasse - warum soll das nicht »semantisch sauber« sein?

Übrigens kann man allen zusammengehörigen Elementen eine Klasse geben und dann z.B. über durch document.body.className festlegen, ob sie alle angezeigt werden oder nicht:
http://forum.de.selfhtml.org/archiv/2005/2/t101698/#m624781

Mathias

[Andreas Dölling]

Hallo,

Ähnliche Elemente bekommen dieselbe Klasse - warum soll das nicht »semantisch sauber« sein?

naja, die Sache ist die, daß CSS-Klassen zunächst einmal für die Darstellung da sind, nicht für die Javascript-Logik (Trennung von Struktur, Darstellung und Verhalten -> XHTML, CSS und JS).
Es gibt mittlerweile viele Skripte, die CSS-Klassen "mißbrauchen", um Elemente als für bestimmte Aktionen verantwortlich zu kennzeichnen. Das hat aber mit der Darstellung erst einmal nichts zu tun.
Darauf wollte ich nur hinweisen. Es gibt dazu einen interessanten Artikel bei "A list apart": < http://www.alistapart.com/articles/scripttriggers/>.

Aber ich gebe es ja zu: ich "mißbrauche" CSS-Klassen auch äußerst gerne für meine JS-Skripte. Es funktioniert eben so gut.
;)

Ciao,
Andreas

[MudGuard]

Hi,

Ähnliche Elemente bekommen dieselbe Klasse - warum soll das nicht »semantisch sauber« sein?
naja, die Sache ist die, daß CSS-Klassen zunächst einmal für die Darstellung da sind, nicht für die Javascript-Logik (Trennung von Struktur, Darstellung und Verhalten -> XHTML, CSS und JS).

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

* As a style sheet selector (when an author wishes to assign style information to a set of elements).
    * For general purpose processing by user agents.

(siehe http://www.w3.org/TR/html401/struct/global.html#adef-class)

"For general purpose processing by user agents" trifft doch ziemlich genau, was Christian vorhat.

Es gibt mittlerweile viele Skripte, die CSS-Klassen "mißbrauchen",

Du meinst mit CSS-Klassen das HTML-Attribut mit Namen "class"?

um Elemente als für bestimmte Aktionen verantwortlich zu kennzeichnen.

Das ist genau einer der Zwecke, für den das class-Attribut existiert, s.o.
Von einem Mißbrauch kann also gar nicht die Rede sein.

Das hat aber mit der Darstellung erst einmal nichts zu tun.

So wie das class-Attribut erst einmal nichts mit der Darstellung zu tun hat.

cu,
Andreas

[Andreas Dölling]

Hallo,

es geht mir doch gar nicht um um die Frage, ob der angesprochene "Mißbrauch" (man beachte die Anführungszeichen) nun regelkonform ist oder nicht. Meine Anmerkung war viel pragmatischer gemeint.
Lies mal den Artikel von Peter Paul Koch, den ich verlinkt habe. Der ist wirklich sehr interessant. Und darin geht es nicht um Richtig und Falsch, Erlaubt und Verboten, sondern Koch weist anhand ganz praktischer Beispiele auf die Probleme hin, welche die Nutzung von Klassen für Darstellung UND Verhalten mit sich bringen kann.

Wie gesagt: ich selbst benutze die Klassen auch oft und gerne für JS-Zwecke. Ich kann aber Kochs Feststellungen zustimmen.

Schönes Wochenende!

Ciao,
Andreas