JavaScript Firefox + Doctype

Fishbone22

Hallo zusammen :)
ID: 89701
L
20 April 2006
253
4
Hallo zusammen!

Ich habe mich jetzt tage lang dumm und dämlich gesucht und gerade endlich das Problem meines nicht laufenden Scriptes gefunden.

Tests:

Opera: Keine Probleme
IE: Keine Probleme
FF (Ohne XHTML 1.0 Strict deklarierung): Keine Probleme
FF (Mit XHTML 1.0 Strict deklarierung): Nichts tut sich


Auf die idee, dass es am Doctype liegt bin ich garnicht gekommen.
Wie kann es sein, dass das hinzufügen bzw. das entfernen eines doctypes dafür sorgt, dass ein JS-Script läuft bzw. nicht läuft.

Aber das kuriose ist ja, nur im FF.

Das Script war folgendes:

Code:
var index = 10;

function einsup() {

eins.style.zIndex = index;
zwei.style.zIndex = index -1;

}

function zweiup() {

eins.style.zIndex = index -1;
zwei.style.zIndex = index;

}

also nichts großartiges. Will einfach auf einer Seite bei einem klick auf ein Bild, dass sich der zindex eines divs verändert, sodass ich alle divs exakt übereinander habe und nur das gewünschte an oberster stelle.

Kann mir irgendjemand sagen, wieso das mit dem Doctype nicht geht, oder ob ich irgendwas am Script ändern muss etc.pp.

Hab schon gefühlte 8 Stunden bei google gesucht und getestet.

Wäre echt nett, wenn mir jemand helfen könnte!


Mfg, Fishbone22
 
  1. Hast du, nachdem du das Document mit dem Doctype versehen hast, das ganze mal durch den Validator laufen lassen?
  2. Wo bekommst du die Variablen eins und zwei her?
 
Greif doch mal ordentlich über das DOM (getAttribute, setAttribute) zu. Oder benutz zum Testen mal ne JS-Bibliothek (z.B. jQuery).
 
War nur ne Vermutung. document.write() is ja mit XHTML auch nicht mehr zulässig.
 
"eins" und "zwei" sind id's von 2 divs im html code. funktioniert ja auch überall, bloss nich im ff mit doctype. ist mir unerklärlich. ich hab auch schon alles mögliche ausprobiert mit getelementbyid und mit übergabe also function(id) { id.style.zIndex = x } usw. nix zu machen.

@Validator: Ja habe ich. Der hat nur gemeckert weil ich ein alt attribut bei nem bild vergessen habe.

Aber document.write() funktioniert doch noch unter xhtml. was heißt denn nicht zulässig?
 
"eins" und "zwei" sind id's von 2 divs im html code. funktioniert ja auch überall, bloss nich im ff mit doctype. ist mir unerklärlich. ich hab auch schon alles mögliche ausprobiert mit getelementbyid und mit übergabe also function(id) { id.style.zIndex = x } usw. nix zu machen.

PHP:
function getElem(id) {
    return document.getElementById(id);
}

function einsup(eins, zwei) {
var eins = getElem(eins), zwei = getElem(zwei);

eins.style.zIndex = index;
zwei.style.zIndex = index -1;

}

function zweiup(eins, zwei) {
var eins = getElem(eins), zwei = getElem(zwei);
eins.style.zIndex = index -1;
zwei.style.zIndex = index;

}

Von solchem Code ist aber generell abzusehen, weil es in der Regel wesentlich einfacher und sauberer geht... definiere einfach zwei CSS-Klassen (up und normal z.B.) und gib dem Element, das aktuell oben sein soll die Klasse "up" und dem anderen "down".

Aber document.write() funktioniert doch noch unter xhtml. was heißt denn nicht zulässig?

Liegt an den viel zu toleranten Browsern. Die Spec verbietet es. Ich weiß jetzt nicht, ob es immer noch geht, wenn man das XHTML mit korrektem Content-Type ausliefert, aber mit text/html geht es leider :(
 
hab schon öfter festgestellt, dass der FF im Quirks-Mode JavaScript nur noch teilweise oder gar nicht ausgeführt hat, warum das so ist, weiß ich nicht.
 
Kann doch nich angehen ey...

Code:
<script type="text/javascript">

function zweiup() {
  eins.style.visibility = 'hidden';
  zwei.style.visibility = 'visible';
}

function einsup() {
  eins.style.visibility = 'visible';
  zwei.style.visibility = 'hidden';
}

</script>

das geht im FF nicht! hat der irgendwie voll die macken der browser!? lächerlich.

die id's muss ich doch nicht mit übergeben oder? braucht man doch nur, wenn irgendwelche werte benötigt werden oder irre ich mich da? ich mein wenn ich die id's übergeben gehts auch nich...

@paddya: geht auch nicht :/, trotzdem danke

kann das irgendwie an der Version liegen? Hab 3.6

EDIT:

und ich habe auch keine lust auf sowas:

PHP:
if($browser != "Mozilla Firefox") { echo "[Doctype]"; }

ok ich mein, dass geht aber trotzdem lachhaft :-?
 
Webdeveloper Toolbar und Firebug installieren und schauen was da vor sich geht :roll:

und der FF hat sicherlich keine Macke ;) Der IE ist absolut fehlertolerant und versucht alles irgendwie hinzubiegen, dass es irgendwie funktioniert, was viel mehr Probleme macht. Der IE ist eine Qual ;)

Safari, Opera und Chrome werden bestimmt bestätigen, dass das JS nur im IE geht.
 
HTML:
<html>
<Head></head>
<body>

<div id="eins">test</div>
<div id="zwei">test2</div>

<div onclick="einsup()">einsup</div>
<div onclick="zweiup()">zweiup</div>
    
<script type="text/javascript"> 
function zweiup() { eins.style.visibility = 'hidden'; zwei.style.visibility = 'visible'; } function einsup() { eins.style.visibility = 'visible'; zwei.style.visibility = 'hidden'; } </script>
</body>
</html>
Das geht bei mir im FF, der Firebug meldet:


Ein Element wurde im globalen Geltungsbereich per ID/Name referenziert. Verwenden Sie den W3C-Standard document.getElementById() stattdessen.


Ich habe bisher gar nciht gewußt, das es überhaupt über die id alleine geht.
 
Webdeveloper Toolbar und Firebug installieren und schauen was da vor sich geht :roll:

und der FF hat sicherlich keine Macke ;) Der IE ist absolut fehlertolerant und versucht alles irgendwie hinzubiegen, dass es irgendwie funktioniert, was viel mehr Probleme macht. Der IE ist eine Qual ;)

Safari, Opera und Chrome werden bestimmt bestätigen, dass das JS nur im IE geht.

nope. ich benutze eig. nur Opera und da hat es funktioniert, genau wie im IE. Deswegen bin ich auch davon ausgegangen, dass das im FF auch funktioniert... bis mein Arbeitskollege das getestet hat :ugly:
 
HTML:
<html>
<Head></head>
<body>

<div id="eins">test</div>
<div id="zwei">test2</div>

<div onclick="einsup()">einsup</div>
<div onclick="zweiup()">zweiup</div>
    
<script type="text/javascript"> 
function zweiup() { eins.style.visibility = 'hidden'; zwei.style.visibility = 'visible'; } function einsup() { eins.style.visibility = 'visible'; zwei.style.visibility = 'hidden'; } </script>
</body>
</html>
Das geht bei mir im FF, der Firebug meldet:


Ein Element wurde im globalen Geltungsbereich per ID/Name referenziert. Verwenden Sie den W3C-Standard document.getElementById() stattdessen.


Ich habe bisher gar nciht gewußt, das es überhaupt über die id alleine geht.

Dann probier mal das:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<Head></head>
<body>

<div id="eins">test</div>
<div id="zwei">test2</div>

<div onclick="einsup()">einsup</div>
<div onclick="zweiup()">zweiup</div>
    
<script type="text/javascript"> 
function zweiup() { eins.style.visibility = 'hidden'; zwei.style.visibility = 'visible'; } function einsup() { eins.style.visibility = 'visible'; zwei.style.visibility = 'hidden'; } </script>
</body>
</html>

trotzdem danke ^^
 
Also mit korrektem Javascript (also inkl. getElementById) funktioniert das im FF 3.7.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<Head></head>
<body>

<div id="eins">test</div>
<div id="zwei">test2</div>

<div onclick="einsup()">einsup</div>
<div onclick="zweiup()">zweiup</div>
    
<script type="text/javascript"> 
var eins = document.getElementById('eins'), zwei = document.getElementById('zwei');
function zweiup() { eins.style.visibility = 'hidden'; zwei.style.visibility = 'visible'; } function einsup() { eins.style.visibility = 'visible'; zwei.style.visibility = 'hidden'; } </script>
</body>
</html>
 
jetzt wird mir so einiges klar. ich hab natürlich den js code immer zwischen <head> und </head> gehabt. aber wieso funktioniert das nur, wenn man den js code NACH dem code von den divs hinpackt? also so:

so nicht:

HTML:
<html>
<head>
<script></script>
</head>
<body>
<div ...></div>
</body>
</html>

aber so schon:

HTML:
<html>
<head>
</head>
<body>
<div ...></div>
<script></script>
</body>
</html>
 
Also zuerst dachte ich es koennte daran liegen dass das Script nicht XHTML Valid ist (also ein textblock mit '<', '>' und '&' drin) in dem Fall musst du dein Script noch als nicht-XML deklarieren:
Code:
<script type="text/javascript">
  //<![CDATA[
  alert('Tom & I want to say "10 > 9"');
  //]]>
</script>
von hier.

In deinem Fall haben's meine Vorschreiber wahrscheinlich entdeckt. Am besten du registrierst ein onload-handler: https://developer.mozilla.org/en/DOM/element.addEventListener
Wird zwar etwas gebastel weil sich IE nicht an den standard haelt, aber da kann man drum rum bauen :ugly:
 
Wird zwar etwas gebastel weil sich IE nicht an den standard haelt, aber da kann man drum rum bauen :ugly:

Gibt ne sehr kompakte Lösung von John Resig:

PHP:
function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}