Don P: onclick zusammenfassen

Beitrag lesen

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