Schwierigekeiten mit dem Auslagern eines js

[Sebastian Schimpf]

Moin,

ich habe mir ein kleines Script zu nutze gemacht, welches
ein div auf Mausklick ein- bzw. ausblendet.

Hier das Script:

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

function ShowLayer(id)
{
  document.getElementById().style.display = "block";
}

Funktioniert einwandfrei!

Im HTML-Quellcode habe ich folgendes:

<div id="style-menu">
<div id="on" style="border: 1px solid #90ee90; padding: 5px;">
<a href="javascript: expandCollapse('expand', 'on');">Schrift-Menü öffnen</a>
</div>
<div id="expand" style="display: none; border: 1px solid #90ee90;padding: 5px;">
<a href="javascript: expandCollapse('expand', 'on');">Schrift-Menü schließen</a>
Inhalt ...
</div>
</div>

Auch das funktioniert so ganz gut.

Sobald ich allerdings die Funktion expandCollapse()
in ein Script auslagere, funktioniert es nicht mehr:

Meldung der js-Console (Mozilla):
Fehler: expandCollapse is not defined
Quelldatei: javascript: expandCollapse('expand', 'on');
Zeile: 1

Ich frage mich und nun auch euch,
was ich hier wohl falsch mache.
Vielleicht kann mir jemand weiterhelfen.

Liebe Grüße,
Sebastian

[Dieter Raber]

Hallo,

function ShowLayer(id)
{
  document.getElementById().style.display = "block";

----------------------------^ Welche id?

<div id="on"

-----------^^ Die Id ist sehr ungluecklich gewaehlt, in Deinem Fall spielt es zwar kein Rolle, aber in bestimmten Sprachen kann 'on' auch als true interpretiert werden, was sicher zu Verwirrung fuehrt.

<a href="javascript: expandCollapse('expand', 'on');">

Anstatt des Pseudoprotokolls 'javascript' ist
<a href="ein_link" onclick="expandCollapse('expand', 'on');return false">
vorzuziehen

Sobald ich allerdings die Funktion expandCollapse()
in ein Script auslagere, funktioniert es nicht mehr:

Wie und wo machst Du das?

Dieter

[Sebastian S.]

Hallo Dieter,

document.getElementById().style.display = "block";
----------------------------^ Welche id?

Ups, dieser Code kommt wohl noch aus einem anderen Script,
welches hier garnicht im Einsatz ist.

<div id="on"
-----------^^ Die Id ist sehr ungluecklich gewaehlt, in Deinem Fall spielt es zwar kein Rolle, aber in bestimmten Sprachen kann 'on' auch als true interpretiert werden, was sicher zu Verwirrung fuehrt.

Interessanter Hinweis. Werde ich beherzigen!

<a href="javascript: expandCollapse('expand', 'on');">
Anstatt des Pseudoprotokolls 'javascript' ist
<a href="ein_link" onclick="expandCollapse('expand', 'on');return false">
vorzuziehen

Kannst du mir das kurz erklären. Was ist ein Pseudoprotokoll?
Sollte ich dann folgendes schreiben: <a href="#" ... ? einen Link will ich ja nicht ansteuern.

Ich habe gerade festgestellt,
dass ein Semikolon in anderen Funktionen fehlte (ausgelagerte Scriptdatei).
Komischer Weise habe ich die Fehlermeldung erst jetzt angezeigt bekommen, wo ich einen überflüssigen Teil aus dem Script gelöscht habe!

Super,
jetzt läuft es!

Danke für die Infos! Vielleicht magst du mir meine Frage noch eben beantworten. Wäre super!

Gruß,
Sebastian

[Dieter Raber]

Hallo,

Kannst du mir das kurz erklären. Was ist ein Pseudoprotokoll?
Sollte ich dann folgendes schreiben: <a href="#" ... ? einen Link will ich ja nicht ansteuern.

das Element <a> dient dazu, auf eine andere Seite zu verlinken, eine Mail zu schreiben etc, aber nicht dazu, irgendwelche Javascripte zu starten. Es hat sich aber so eingebuergert und ist auch in Selfhtml so zu finden, dass man Links mit <a href="javascript:.." 'missbraucht. Vermutlich ist der Grund, dass bei frueheren Browsern keine einheitliche Eventhandler (onclick, onchange etc.) zur Verfuegung standen.
Heute ist die Situation ja so, dass alle moeglichen Elemente mit Eventhandlern ausgestattet werden koennen, so dass fuer diesen Workaround kein Grund mehr besteht. Hinzu kommt, dass man ja nicht mehr zwangsweise mit der linken Maustaste auf einen Link klickt, sondern vielleicht mit der mittleren (um in Mozilla ein neues Tab zu oeffnen) usw. Der Weg <a href="#" onclick... ist auch unschoen, weil man unter Umstaenden wieder auf den Seitenanfang zurueckgefuehrt wird (man linkt ja in diesem Fall auf http://domain//seite.htm#).

Du kannst also Scripte ohne weiteres mit <div(button,td,span...) onclick="function()" starten, wenn Dein Element dann so aussehen soll wie ein Link, bittesehr, dafuer gibt's CSS.

Langer Rede kurzer Sinn, die Browser sind besser geworden, die Moeglichkeiten vielfaeltiger, die User haben mehr drauf und das javascript: Pseudoprotokoll damit ein Fall fuer die Mottenkiste.

Dieter

[Sebastian Schimpf]

Hallo  Dieter,

vielen Dank für die ausführliche Erklärung bezüglich deiner Aussage zum "Pseudoprotokoll".

Nun verstehe ich, was du damit meinst! :-)
Die Lösung mit a href="#" finde ich auch irgendwie unsinnig, weil
eben im IE damit (normalerweise) der besagte Sprung an den Seiteanfang gemacht wird.

Ein <div> mit onlick auszustatten ist auch nicht unbedingt die Optimal-Lösung, da ich mich möglichst an eine logische,semantische Strukturierung des Quellcodes halten möchte.

In meinem Fall (ein Menü zum ändern der Schriftgröße) ist diese Standardkonformität sowieso in Frage gestellt, da ich mit meinen <a>-Tags ja kein Links ansteuere, sondern ein js aufgerufe.

Nun, bei derartigen JavaScript-Experimenten ist es dann wohl auch nicht mehr so extrem wichtig, ob ich ein <div> oder in <a> anklickbar gestalte.
Letztendlich geht es mir um eine saubere Lösung und eine möglichst hohe Kompatibilität in den verschiedenen Browser bzw. Browser-Versionen. Ich werde nun mit den endlich einwandfrei funktionierenden Scripten weiterarbeiten.

Ich danke dir für deine Hilfe,
und wünsche dir einen schönen Sonntag!

Liebe Grüße,
Sebastian

[Ingo Turski]

Hi,

Die Lösung mit a href="#" finde ich auch irgendwie unsinnig, weil
eben im IE damit (normalerweise) der besagte Sprung an den Seiteanfang gemacht wird.

Du hast den Hinweis auf return false übersehen...

Ein <div> mit onlick auszustatten ist auch nicht unbedingt die Optimal-Lösung, da ich mich möglichst an eine logische,semantische Strukturierung des Quellcodes halten möchte.

Dann ist ein Link noch unlogischer, weil es kein Linkziel gibt.
Gesetzt den Fall, Du verwendest zum Anklicken eine Grafik, dann wäre logisch <img onclick...
Oder wenn Du einen Text verwendest <p onclick...

freundliche Grüße
Ingo

[LeLurch]

sers,

hast du im <head> die angaben gemacht, wo das script liegt? konnte ich aus deinen angaben nicht entnehmen, wenn nicht, musst du es IMHO folgendermassen einbinden:

<script src="blabla/Script_source.js" type="text/javascript"></script>

greez,

der Lurch

[Sebastian S.]

Hallo Lurch,

<script src="blabla/Script_source.js" type="text/javascript"></script>

genauso habe ich es gemacht.
Das funtzt leider nich!

Gruß,
Sebastian