Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon wiemachichdas vom 02.10.2021, 12:10 Options

Im HTML ein Array an JS übergeben

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

Antwort schreiben

Antwort 1 von wiemachichdas vom 02.10.2021, 12:11 Options

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....

Antwort 2 von Dr.Ma-Busen vom 02.10.2021, 13:00 Options

Moin!

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

MfG

Antwort 3 von wiemachichdas vom 02.10.2021, 15:40 Options

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

Antwort 4 von gast42 vom 02.10.2021, 16:18 Options

kürzer:

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

new Array() ist in der Regel unnötig

Antwort 5 von gast42 vom 02.10.2021, 16:46 Options

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');" />

Antwort 6 von Dr.Ma-Busen vom 02.10.2021, 16:57 Options

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.

Antwort 7 von gast42 vom 02.10.2021, 17:11 Options

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");
  }
}

Antwort 8 von wiemachichdas vom 06.10.2021, 10:02 Options

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!

Antwort 9 von gast42 vom 06.10.2021, 17:31 Options

Zitat:
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)

Antwort 10 von wiemachichdas vom 07.10.2021, 10:45 Options

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:


function toggleDisplay()
{
    for (var id in arguments) {
        if (document.getElementById(id).style.display = "none") {
            document.getElementById(id).style.display = "none";
        } else {
            document.getElementById(id).style.display = "block";
        }
    }
}

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


for (var i = 0; i < arguments.length; ++i) {
        if (document.getElementById(arguments[i]).style.display == "none") {
            document.getElementById(arguments[i]).style.display = "block";
        } else {
            document.getElementById(arguments[i]).style.display = "none";
        }
    }

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.

Antwort 11 von Dr.Ma-Busen vom 07.10.2021, 14:01 Options

Denke mal, wenn es kein tippfehler ist, liegt es am =

Zitat:
if (document.getElementById(id).style.display = "none") {...

Ein = ist ein Zuweisung, Zwei = ist ein vergleich.

Sprich in der if-Abfrage weist du document.getElementById(id).style.display den Wert "none" zu und vergleichst nicht ob das element den Wert "none" hat.

In der 2. Variante nutzt du ja zwei = deswegen funktioniert auch die 2. Variante

Antwort 12 von Dr.Ma-Busen vom 07.10.2021, 14:04 Options

Aso, und in der 1. Variante sagst du wenn display == "none" ist, dann soll display der wert "none" zugewisen werden.

Antwort 13 von gibtsdochnicht vom 07.10.2021, 14:51 Options

Hm was für blöde fehler...hab sie beseitigt, die seite ungefähr 10x neugeladen, und es geht immer noch nicth :-(

hier nochmal der korrigierte Code:


function toggleDisplay()
{
    for (var id in arguments) {
        if (document.getElementById(id).style.display == "none") {
            document.getElementById(id).style.display = "block";
        } else {
            document.getElementById(id).style.display = "none";
        }
    }
}

wenn ich direkt über der if-abfrage ein alert( ) hinsetze, wird dieses ebenfalls nicht ausgeführt...da stimmt doch was nicht :-(

Antwort 14 von Dr.Ma-Busen vom 07.10.2021, 15:19 Options

Was sagt denn die Fehlerkonsole vom FF?

Ansonsten versuch es mal mit der andere variante der for-schleife( for(var i = 0; i < arguments.length;...)

Antwort 15 von gast42 vom 07.10.2021, 19:27 Options

die diversen Browser interpretieren arguments scheinbar verschieden, in Opera klappts mit for in ein bisschen, im Firefox gar nicht und IE hab ich lieber erst gar nicht getestet.

besser ist die Funktion so:

function toggleDisplay()  {
 for (var i = 0; i < arguments.length; i++) {
  var e=document.getElementById(arguments[i]);
  e.style.display = (e.style.display == "block")  ? "none" : "block";
  }
}

dann muss getElementById nicht so oft aufgerufen werden. Es reicht das Element 1mal zu suchen!

Antwort 16 von jetztgehtsfast vom 08.10.2021, 09:06 Options

Die Fehlerkonsole sagt nix...keine Fehler. es geht nur einfach nicht. ABer ok, wenn ich weiß, dass das nicht alle Browser können, mach ich es so wie in dem letzten Tipp! Danke für die super Optimierung!

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken