Skript inkompatibel mit Firefox? - Javascript-Forum JSwelt (Javascript, PHP, MySQL, AJAX, Webdesign)

Lostelei · registriert: 03-05-2008

Hallo zusammen,
Also ich bin normalerweise kein Javascript Programmierer, daher habe ich wenig Ahnung ueber die ganzen Grundsaetzlichkeiten, und fummle Skripte immer nur nach Bedarf irgendwie zusammen, daher verzeiht mir vielleicht unsauberen JS Code, oder sowas.
Bevor ich euch den Code reinkopiere, erklaere ich mal in Worten, was ich mache, und was passiert.

Ich habe ein Formular (name = "formular") mit Radiobuttons (name ="a1"). Jeder Button ruft onClick die zustaendige Funktion auf, die prueft ob der 7. Radiobutton aktiv ist. Dann soll ein zuvor mit der CSS Angabe "display: none;" versteckter DIV Layer (id = "a11") mit dem Javascript Befehl "a11.style.display = 'block';" sichtbar gemacht werden, um ein weiteres Eingabefeld anzuzeigen. Diese Zeile ist das Problem.

Die Besonderheit ist, dass es ja eigentlich funktioniert. Auf Safari unter OS X, auf Internet Explorer unter Windows, und auf Opera unter Windows. Nicht jedoch auf Firefox. Weder unter OS X noch Windows.
Die Error Console in Firefox meint 'a11 is not defined'. Also ignoriert er wohl auf irgendeine Art und Weise ploetzlich, dass der DIV a11 existiert.
"Ploetzlich" sage ich vor allem deshalb, weil ich als ich das Skript anfing zu schreiben, es ja nur auf Firefox testete und es anfangs klappte, also muss ich irgendetwas geaendert haben, das Firefox nicht passt, aber ich kann nicht nachvollziehen, was es sein koennte.

Hier der Javascript Code:

Code:

<script language="javascript">
function a11Visibility() {
	var val = document.formular.a1[7].checked;
	if(val == true) {
		a11.style.display = 'block';

	} else {
		a11.style.display = 'none';
	}
}
</script>

Under der HTML Part:

Code:

<form name="formular" action="index.php?mode=page2" method="POST">
<b>Woher kennst Du unsere Seite?</b><br />
<input type="radio" name="a1" value="1" onClick="a11Visibility()" /> Rezensionen auf derstandard.at<br />
<input type="radio" name="a1" value="2" onClick="a11Visibility()" /> Medienberichte &uuml;ber textfeld (Presse, Unique...)<br />
<input type="radio" name="a1" value="3" onClick="a11Visibility()" /> Wiener Alumni-Verband<br />
<input type="radio" name="a1" value="4" onClick="a11Visibility()" /> Verlinkungen &uuml;ber / Berichte von Strvs, Bagrus, Uniwebseiten...<br />
<input type="radio" name="a1" value="5" onClick="a11Visibility()" /> Werbematerialien<br />
<input type="radio" name="a1" value="6" onClick="a11Visibility()" /> Suchmaschine<br />
<input type="radio" name="a1" value="11" onClick="a11Visibility()" /> Mundpropaganda<br />
<input type="radio" name="a1" value="12" onClick="a11Visibility()" /> Andere <br />
<div id="a11" style="display: none;">Welche? <input type="text" name="a11" value="" maxlength="255" /></div>
</form>

Ich dachte anfangs es koennte ein Problem sein, dass der INPUT Tag innerhalb des DIV auch name= "a11" bekam, wodurch es fuer Javascript nicht mehr eindeutig ist, welcher der beiden gemeint ist, aber ich habe das name Attribut auch schon rausgenommen - es spielt keine Rolle.

Also~ hat irgendwer einen Tipp, wieso Firefox den Befehl "a11.style.display = 'block'" nicht umsetzt? Braucht es zusaetzliche Deklarationen? (simple Dinge wie document.a11.style.display stattdessen zu machen versuchte ich schon, auch kein Erfolg)

Vielen Dank im Vorhinein, falls mir jemand helfen kann und moechte!

jeko · registriert: 03-06-2004

Bei mir funktioniert das Beispiel (WinXP, Fifo 2.0.0.14).

Lostelei · registriert: 03-05-2008

Danke fuer's Testen! Wenn ich es einfach nur alleine in eine Datei packe klappt es bei mir auch. Das macht die Sache aber nur noch mysterioeser, weil das einzige was in meiner Datei sonst noch steht sind halt die ganzen HTML head Daten und darunter auch nur ein anderer Div und </body></html>

Der komplette Quelltext der Seite ist momentan:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Textfeld Umfrage</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="wrap"> <!-- AB HIER eigentlicher Code -->
	<script language="javascript">
function a11Visibility() {
	var val = document.formular.a1[7].checked;
	if(val == true) {
		a11.style.display = 'block';

	} else {
		a11.style.display = 'none';
	}
}
function a2Visibility() {
	if(document.formular.a2[0].checked == true) {
		a21.style.display = 'block';		
	} else {
		a21.style.display = 'none';	
	}
	if(document.formular.a2[1].checked == true) {
		a22.style.display = 'block';		
	} else {
		a22.style.display = 'none';	
	}
	if(document.formular.a2[2].checked == true) {
		a23.style.display = 'block';		
	} else {
		a23.style.display = 'none';	
	}

}
</script>
<form name="formular" action="index.php?mode=page2" method="POST">
<b>Woher kennst Du textfeld.ac.at?</b><br />
<input type="radio" name="a1" value="1" onClick="a11Visibility()" /> Rezensionen auf derstandard.at<br />

<input type="radio" name="a1" value="2" onClick="a11Visibility()" /> Medienberichte &uuml;ber textfeld (Presse, Unique...)<br />
<input type="radio" name="a1" value="3" onClick="a11Visibility()" /> Wiener Alumni-Verband<br />
<input type="radio" name="a1" value="4" onClick="a11Visibility()" /> Verlinkungen &uuml;ber / Berichte von Strvs, Bagrus, Uniwebseiten...<br />
<input type="radio" name="a1" value="5" onClick="a11Visibility()" /> Werbematerialien<br />
<input type="radio" name="a1" value="6" onClick="a11Visibility()" /> Suchmaschine<br />

<input type="radio" name="a1" value="11" onClick="a11Visibility()" /> Mundpropaganda<br />
<input type="radio" name="a1" value="12" onClick="a11Visibility()" /> Andere <br />
<div id="a11" style="display: none;">Welche? <input type="text" name="a11" value="" maxlength="255" /></div>
<br /><br />
<b>K&ouml;nntest du dir vorstellen, deine Texte (Seminararbeiten, Diplomarbeiten, Dissertationen, Paper) online zu stellen?</b><br />
<input type="radio" name="a2" value="1" onClick="a2Visibility()" /> Ja, aber nur gegen Entgelt<br />
<div id="a21" style="display: none; margin-left: 20px;"><input type="radio" name="a21" value="1" /> Habe ich schon gemacht<br />

<input type="radio" name="a21" value="2" /> Habe ich noch nie gemacht<br /></div>
<input type="radio" name="a2" value="2" onClick="a2Visibility()" /> Ja, auch unentgeltich<br />
<div id="a22" style="display: none; margin-left: 20px;"><input type="radio" name="a22" value="1" /> Habe ich schon gemacht<br />
<input type="radio" name="a22" value="2" /> Habe ich noch nie gemacht<br /></div>
<input type="radio" name="a2" value="3" onClick="a2Visibility()" /> Nein<br />
<div id="a23" style="display: none; margin-left: 20px;">Was sind deine Motive daf&uuml;r? <input type="text" name="a23" value="" maxlength="255" /></div>

</form> <!-- AB HIER eigentlicher Code Ende -->
		
	<div id="footer"><a href="http://www.textfeld.ac.at">textfeld.ac.at</a></div></div><!-- zweiter DIV End Tag wegen dem "wrap" DIV ganz am Anfang -->
</body>
</html>

Kann es wirklich sein, dass irgendetwas das um den eigentlich betreffenden Code steht, verhindert, dass es funktioniert?
Jetzt bin ich erst recht verwirrt.

anna55 · registriert: 07-02-2006

Zitat:

Zitat von Lostelei

Kann es wirklich sein, dass irgendetwas das um den eigentlich betreffenden Code steht, verhindert, dass es funktioniert?
Jetzt bin ich erst recht verwirrt.

Im Quirksmode funktioniert es auch im FF.

Lostelei · registriert: 03-05-2008

Danke fuer die Info auch.

Ich bin inzwischen so weit, zu wissen, dass es was mit dem Doctype und der Validitaet des Dokuments zu tun haben muss. Vermutlich ist Firefox mal wieder so valide, dass er Invalide ist. Wenn ich den Doctype vollkommen rausnehme, geht es naemlich mit dem ganzen Dokument auch. Aber das kann ja wohl keine Loesung sein.
Ich hab erstmal auf xhtml transitional gedowngradet, und es dort vollkommen validiert, aber deshalb geht das auch nicht. Genausowenig wenn ich auf normales HTML strict runtergehe.

Gibt es vielleicht eine Dokumentation darueber, was Firefox anders macht, wenn er im Quirks Mode laeuft? evtl. koennte ich ja damit endlich den Fehler finden.

aktuelle xhtml transitional version sieht nun uebrigens so aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
function a11Visibility() {
	var val = document.formular.a1[7].checked;
	if(val == true) {
		a11.style.display = 'block';

	} else {
		a11.style.display = 'none';
	}
}
</script>
<form name="formular" action="index.php?mode=page2" method="post">
<b>Woher kennst Du unsere Seite?</b><br />
<input type="radio" name="a1" value="1" onclick="a11Visibility()" /> Rezensionen auf derstandard.at<br />
<input type="radio" name="a1" value="2" onclick="a11Visibility()" /> Medienberichte &uuml;ber textfeld (Presse, Unique...)<br />
<input type="radio" name="a1" value="3" onclick="a11Visibility()" /> Wiener Alumni-Verband<br />
<input type="radio" name="a1" value="4" onclick="a11Visibility()" /> Verlinkungen &uuml;ber / Berichte von Strvs, Bagrus, Uniwebseiten...<br />
<input type="radio" name="a1" value="5" onclick="a11Visibility()" /> Werbematerialien<br />
<input type="radio" name="a1" value="6" onclick="a11Visibility()" /> Suchmaschine<br />
<input type="radio" name="a1" value="11" onclick="a11Visibility()" /> Mundpropaganda<br />
<input type="radio" name="a1" value="12" onclick="a11Visibility()" /> Andere <br />
<div id="a11" style="display: none;">Welche? <input type="text" name="a11" value="" maxlength="255" /></div>
</form>
</body>
</html>

anna55 · registriert: 07-02-2006

Da ich kein Scripter bin, weiß ich nicht, wie Du dieses Script umschreiben musst, damit es im FF funktioniert.
Die Fehlerkonsole im FF meldet immer noch "Fehler: a11 is not defined".

Es funktioniert offensichtlich nicht, wenn Du korrektes XHTML verwendest, zu dem auch ein richtiger Doctype gehört.

Infos zu Doctypes findest Du hier:
puredesign.ch Webdesign | Doctypes: Websites mit dem richtigen Doctype versehen
LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype
CSS - Quirks mode and strict mode

Also muss a11 definiert werden, wie auch immer.

Lostelei · registriert: 03-05-2008

Also mein Verdacht ist, dass Firefox irgendwas am DIV nicht passt im Zusammenhang mit validem HTML. Und deshalb wird dann dieser DIV mit id a11 nicht fuer Javascript "definiert".
aber was kann man an der Zeile

Code:

<div id="a11" style="display: none;">Welche? <input type="text" name="a11" value="" maxlength="255" /></div>

groß besser machen?

jeko · registriert: 03-06-2004

Mach den Zugriff auf die Element mal über getElementBy-Funktionen und nicht mit dem hässlichen all.

Lostelei · registriert: 03-05-2008

Das ist a11 nicht all und einfach die ID von dem Layer. Andere Methoden den Layer anzusprechen muesste man mir erst erklaeren, bzw. 'ne Referenz dazu empfehlen.

anna55 · registriert: 07-02-2006

So sollte es gehen

PHP-Code:

  <script language="javascript" type="text/javascript">

function a11Visibility() {

    var val = document.formular.a1[7].checked;

    if(val == true) {

        document.getElementById('a11').style.display = 'block';

 
    } else {

        document.getElementById('a11').style.display = 'none';

    }

}

</script>

Referenz dazu
SELFHTML: JavaScript / Objektreferenz / document

jeko · registriert: 03-06-2004

Zitat:

Zitat von Lostelei

Das ist a11 nicht all und einfach die ID von dem Layer. Andere Methoden den Layer anzusprechen muesste man mir erst erklaeren, bzw. 'ne Referenz dazu empfehlen.

Danke, dessen war ich mir durchaus bewusst.

SELFHTML: JavaScript / Objektreferenz / all

Lostelei · registriert: 03-05-2008

Da kann ich nur noch sagen: Vielen Dank!
Nun streikt auch Firefox nicht mehr bei dem Skript.

Und sorry, falls meine Bemerkung irgendwie belehrend rueber kam, so war sie absolut nicht aufzufassen. Nur da ich eben wenig Ahnung von Basics von Javascript habe, wollte ich sichergehen, dass keine Missvestaendnisse aufkommen (haette ja sein koennen, dass 'all' irgendeine sehr unelegante Methode der Referenzierung ist, oder irgendwas)!

jeko · registriert: 03-06-2004

Kein Problem, ich bin da gerne auch etwas überempfindlich. Aber ich arbeite daran.