onclick zusammenfassen

[zwantE]

Mahlzeit, ich habe eine Auswahlliste die immer undurchsichtiger wird und nun stellt sich mir dir Frage ob ich die onclick-Befehle irgendwie zusammen fassen kann.

Hier das Original:

  
<input onclick="document.getElementById('test1').value = '0' ; document.getElementById('test2').value = '0' ; document.getElementById('test1').style.display = 'none' ; document.getElementById('test2').style.display = 'none' ; document.getElementById('test3').style.display = 'block'"  
type="radio" name="zumtesten" value="1" /

ich hab schon versucht es so zusammenzufassen, aber das hat nicht funktioniert

  
document.getElementById(['test1','test2']).style.display = 'none' ; 

kann man nicht gleiche befehle mehreren IDs zuweisen?

MfG zwantE

[suit]

kann man nicht gleiche befehle mehreren IDs zuweisen?

Dein Stichwort ist Funktion, genauer gesagt "function".

[zwantE]

kann man nicht gleiche befehle mehreren IDs zuweisen?

Dein Stichwort ist Funktion, genauer gesagt "function".

Hi, danke für den Hinweis!
Ich hab mich sofort ran gemacht um herauszufinden wir das funktioniert,
aber ich kann immer noch nicht eine Funktion für mehre ID´s verwenden.

zum Beispiel habe ich hier diese Funktion erstellt:

  
function show_all() {  
	document.getElementById('test1').style.display = 'block' ;  
	document.getElementById('test2').style.display = 'block' ;  
	document.getElementById('test3').style.display = 'block'  
}

es muss doch irgendwie möglich sein, das ich diese 3 gleichen Anweisungen in eine Zeile bündel kann oder?

also in etwas so:

  
function show_all() {  
	document.getElementById(['test1','test2','test3']).style.display = 'block'  
}

aber das funktioniert leider nicht. :((((

[EKKi]

Mahlzeit zwantE,

Ich hab mich sofort ran gemacht um herauszufinden wir das funktioniert,
aber ich kann immer noch nicht eine Funktion für mehre ID´s verwenden.

Dann hast Du bisher nicht verstanden, was "Parameter" (auch "Argumente" genannt) sind. <http://de.selfhtml.org/javascript/sprache/funktionen.htm@title=Hole dieses Versäumnis nach.>

Du wirst dann auch feststellen, dass Du einer Funktion mehrere Parameter (oder Argumente) übergeben kannst. Du wirst weiterhin feststellen, dass alle an eine Funktion übergebenen Parameter (bzw. Argumente) <http://de.selfhtml.org/javascript/objekte/function.htm#arguments@title=in einem Array zur Verfügung stehen>.

es muss doch irgendwie möglich sein, das ich diese 3 gleichen Anweisungen in eine Zeile bündel kann oder?

Warum muss es das?

aber das funktioniert leider nicht. :((((

Natürlich nicht. Die Methode http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById() erwartet genau einen Parameter - und das ist *eine* ID *eines* Elements. Wenn Du eine andere Funktionalität benötigst, schreibe sie Dir ... oder nutze ein Framework, das diese Funktionalität besitzt.

MfG,
EKKi

[MudGuard]

Hi,

function show_all() {
document.getElementById('test1').style.display = 'block' ;
document.getElementById('test2').style.display = 'block' ;
document.getElementById('test3').style.display = 'block'
}

>   
> es muss doch irgendwie möglich sein, das ich diese 3 gleichen Anweisungen in eine Zeile bündel kann oder?  
  
Natürlich, nichts leichter als das:  
  
~~~javascript
  
function show_all() {  
  document.getElementById('test1').style.display = 'block' ; document.getElementById('test2').style.display = 'block' ; document.getElementById('test3').style.display = 'block'  
}

also in etwas so:

function show_all() {
document.getElementById(['test1','test2','test3']).style.display = 'block'
}

  
Nein, das geht nicht.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[Gunnar Bittersmann]

@@zwantE:

nuqneH

document.getElementById(['test1','test2']).style.display = 'none' ;
kann man nicht gleiche befehle mehreren IDs zuweisen?

Die Methode document.getElementById() erwartet als Parameter einen String, kein Array.

In jQuery ginge das recht einfach: $('#test1, #test2').hide();

Qapla'

[Don P]

Hallo,

Hier das Original:

<input onclick="document.getElementById('test1').value = '0' ; document.getElementById('test2').value = '0' ; document.getElementById('test1').style.display = 'none' ; document.getElementById('test2').style.display = 'none' ; document.getElementById('test3').style.display = 'block'"
type="radio" name="zumtesten" value="1" /

  
Ist wohl Geschmacksache, aber ich persönlich mag solch geschwätzigen Code nicht besonders. Also erstmal das:  
  
`var el = document.getElementById;`{:.language-javascript}  
  
Danach können wir einfach `el(id)`{:.language-javascript} notieren, statt `document.getElementById(id)`{:.language-javascript}  
  
Da mehrfach die gleichen Anweisungen ausgeführt werden sollen (`value=0; display='none'`{:.language-javascript}), bietet sich eine Funktion an, die diese zusammenfasst, z.B. so:  
  
~~~javascript
var ausblenden = function (id) { with(el(id)){ value = 0; display = 'none'; } }  

Und wenn wir schon dabei sind, auch gleich eine zum Einblenden:

var einblenden = function (id) { with(el(id)){ value = 1; display = 'block'; } }

document.getElementById(['test1','test2']).style.display = 'none' ;

>   
> kann man nicht gleiche befehle mehreren IDs zuweisen?  
  
Doch, aber nicht so. Man muss die IDs trotzdem einzeln an getElementById übergeben.  
  
Da die Ids "test1", "test2" usw. heißen, bietet sich eine Schleife an, z.B. so:  
  
`var i=1; while (i<3) { ausblenden('test'+(i++)); } einblenden('test'+i);`{:.language-javascript}  
  

> <input onclick="document.getElementById( ...  
  
Den ganzen onclick-Handler mitsamt den Hilfsfunktionen notierst du besser als separate Funktion.  
  
Gruß, Don P  

[Don P]

Hallo,

Kleine Korrektur:

var ausblenden = function (id) { with(el(id)){ value = 0; style.display = 'none'; } }
var einblenden = function (id) { with(el(id)){ value = 1; style.display = 'block'; } }

Ist trotzdem ungetestet, was man natürlich tun sollte, und dabei die Fehlerkonsole beobachten...

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Kleine Korrektur:

var ausblenden = function (id) { with(el(id)){ value = 0; style.display = 'none'; } }
var einblenden = function (id) { with(el(id)){ value = 1; style.display = 'block'; } }

Größere Korrektur:

Du weißt doch, „[w]as hingegen schwer ist, ist in die Köpfe der Menschen zu bringen“.

Nicht CSS-Eigenschaften per JavaScript ändern, sondern Klassen setzen oder in diesem Fall das geeignete @disabled-Attribut:

var ausblenden = function (id) { with(el(id)){ value = 0; disabled = true; } }
var einblenden = function (id) { with(el(id)){ value = 1; disabled = false; } }

Im Stylesheet steht:

input[disabled] { display: none }

Qapla'

PS: AFAIR ist die Verwendung von with() deprecated.

[Don P]

Hallo,

Größere Korrektur:

Du weißt doch, „[was hingegen schwer ist, ist in die Köpfe der Menschen zu bringen]“.

Nicht CSS-Eigenschaften per JavaScript ändern, sondern Klassen setzen oder in diesem Fall das geeignete @disabled-Attribut:

Ja sicher, aber ich wollte hier keine Doktorarbeit daraus machen ;)
Das ganze Konzept im OP scheint mir ohnehin nicht richtig durchdacht, warum da noch CSS und alles mögliche reinbringen. Zugegeben, das:

var ausblenden = function (id) { with(el(id)){ value = 0; disabled = true; } }
var einblenden = function (id) { with(el(id)){ value = 1; disabled = false; } }

Im Stylesheet steht:

input[disabled] { display: none }

ist recht elegant, aber disabled ja nicht nicht grundsätzlich dasselbe wie display=='none'. Vielleicht gibt es noch andere inputs, die mitunter wirklich disabled sind, d.h. in der Regel sichtbar, aber ausgegraut und nicht bedienbar. Auch diese würden dann verschwinden.

PS: AFAIR ist die Verwendung von with() deprecated.

Ist es? Mozillas Rhino-Engine hat zwar anscheinend gewisse Probleme, Zitat: "Using the with statement prevents the compiler from generating code for fast access to local variables. You're probably better off explicitly accessing any properties of the object."

Aber in unserem Fall hier ist es wohl eher umgekehrt: Lokale Variablen werden im With-Block gar nicht angesprochen, dafür stehen aber zuerst die Eigenschaften des zu manipulierende Objekts in der Scope-Chain, werden also schnell gefunden. Deshalb habe ich hier ausnahmsweise with benutzt, und natürlich auch weil der Code dadurch übersichtlicher wird.

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

ist recht elegant

Wie die Zeile „Die folgende Nachricht zum Thema stammt von:“ schon unschwer erkennen ließ. >;->

aber disabled ja nicht nicht grundsätzlich dasselbe wie display=='none'.

Natürlich nicht. Das Standardverhalten von @disabled ist Ausgrauen. Hier wie da geht es um veränderte Darstellung bei einem Status. Ergo um eine Regel im Stylesheet.

Vielleicht gibt es noch andere inputs, die mitunter wirklich disabled sind, d.h. in der Regel sichtbar, aber ausgegraut und nicht bedienbar. Auch diese würden dann verschwinden.

Den Selektor so anzupassen, dass er nur das (die) gewünschte(n) Element(e) selektiert, sollte nun wirklich nicht das Problem sein.

Qapla'

[Don P]

Hallo,

Wie die Zeile „Die folgende Nachricht zum Thema stammt von:“ schon unschwer erkennen ließ. >;->

Klar doch ;)

Hier wie da geht es um veränderte Darstellung bei einem Status. Ergo um eine Regel im Stylesheet.

Dass ich darauf nicht weiter eigegangen bin, kannst du getrost als Abnicken meinerseits werten.

Hab's ja verstanden und praktiziere das auch meistens. Wenn man hier nur ein bisschen helfen will, ist es mitunter einfach zu mühsam, alles 100% nach allen Regeln der Kunst in einem einfachen Beispiel zu bringen, Stichwort Doktorarbeit.

Den Selektor so anzupassen, dass er nur das (die) gewünschte(n) Element(e) selektiert, sollte nun wirklich nicht das Problem sein.

Das sagst *du*, Meister, aber wenn ich mir den Code im OP so anschaue, kommen mir gewisse Zweifel...

Gruß, Don P