Im HTML ein Array an JS übergeben

Question

Hallo,

ich habe folgendes Problem:

ich hab in meinem HTML-Dokument drei DIV-Container, jedes mit einer eigenen ID.

Dann hab ich ein Form, wo ich drei Radiobuttons definiert habe. Bei Klick auf einem sollen zwei DIVs unsichtbar werden usw...Bei Klick auf ein anderes Radiobutton die andern beiden unsichtbar.

Nun wollte ich dies relativ dynamisch gestalten, d.h. wenn ich mal ein Dokument mit mehr als 3 Divs habe, sollte das auch noch funktionieren. Daher wollte ich zwei Funktionen bauen, eine zum Verstecken und eine zum Anzeigen, und jede dieser Funktionen übergebe ich die IDs zum Anzeigen/Verstecken mit Hilfe eines Arrays. Array deshalb, damit ich 1 - unendlich viele Divs auf einmal bearbeiten kann. Der Code sieht folgendermaßen aus:

function hide(array)
{
alert(array);
for (var id in array) {
document.getElementById(id).style.display = "none";
}
}

Im Html hab ich für das onclick-Event folgendes eingetragen:

<input type="radio" name="selection" value="insert" onclick="hide(new array('import', 'insert'));" />

'import' und 'insert' sind dabei die IDs meiner beiden divs die ich verstecken möchte.
Leider funktioniert das nicht so. Firebug meldet dabei folgendes:
array is not defined

Was muss ich tun, damit es funktioniert?

Vielen Dank schon mal im Voraus

Answer 1

nachtrag:

das alert(array) hatte ich nur zu testzwecken eingebaut. Jedoch kommt hier das Fenster schon gar nicht, so als ob gar nix an die Funktion übergeben würde....

Answer 2

Moin!

Das müsste lauten: new Array(...), nicht new array().


MfG

Answer 3

Hey super,
vielen dank, das hat geklappt...den Fehler hätte ich nie gefunden...

Answer 4

kürzer:

hide(['import', 'insert']);

new Array() ist in der Regel unnötig

Answer 5

und ganz ohne neues Array (denn arguments liefert automatisch ein Array):

function hide() {
for (var id in arguments) {
document.getElementById(id).style.display = "none";
}
}

<input type="radio" name="selection" value="insert" onclick="hide('import', 'insert');" />

Answer 6

Und noch kürzer und ganz ohne array in onclick ist:


<input type="radio" name="selection" value="insert" onclick="show('xyz');" />

Dazu noch die Funktion etwas umändern und eine globale Array die einmal alle IDs enthält.

var array = new Array("id1","id2",...,"idn");
function show(id){
for(var e in array){
document.getElementById(e).style.display = ( (e == id) ? "block" :" none");
}
}

Ist im endeffkt etwas übersichtlicher und man muss nicht an x stellen etwas umänder wenn man ein DIV-Container hinzufügt.

Answer 7

allerdings ist auch dafür weder eine globale Variable (grundsätzlich vermeiden!) noch ein new Array (fast immer überflüssig) nötig. Sinnvoller wäre dieser Ansatz in der Form:

function show(id){
for(var e in ["id1","id2",...,"idn"]) {
document.getElementById(e).style.display = ( (e == id) ? "block" :" none");
}
}

Answer 8

Hallo,

jetzt hätte ich nicht mehr mit so vielen Antworten gerechnet...Ich hab es jetzt so wie in Antwort 5 gemacht. allerdings musste ich arguments durch hide.arguments austauschen, warum auch immer...

danke für alle tipps!

Answer 9

musste ich arguments durch hide.arguments austauschen, warum auch immer

genau das tät mich interessieren: wie bist du auf die Idee gekommen (und wie alt ist dein Browser, das ist nämlich die Syntax für Uralt-Browser aus den 1990er Jahren)

Answer 10

hm ich hab das jetzt noch mal geprüft. es lag auch gar nicht daran, sondern dass die schleife gar nicht durchlaufen wurde. bei mir sieht es jetzt wie folgt aus:

[code]
function toggleDisplay()
{
    for (var id in arguments) {
        if (document.getElementById(id).style.display = &quot;none&quot;) {
            document.getElementById(id).style.display = &quot;none&quot;;
        } else {
            document.getElementById(id).style.display = &quot;block&quot;;
        }
    }
}
[/code]

So funktioniert es bei mir nicht. Bei mir geht es nur, wenn ich die [b]Schleife[/b] so umbaue:


[code]
for (var i = 0; i &lt; arguments.length; ++i) {
        if (document.getElementById(arguments[i]).style.display == &quot;none&quot;) {
            document.getElementById(arguments[i]).style.display = &quot;block&quot;;
        } else {
            document.getElementById(arguments[i]).style.display = &quot;none&quot;;
        }
    }
[/code]

Woran kann das denn liegen? Ich meine, ich kann damit leben, wenn nur die obere Variante funktioniert...aber warum? :-) Mein Browser ist übrigens FF 3.5.3.