Zum Inhalt springen

JS: document.getElementById funktioniert nicht

Erstellt am 10. November 2008 · 11 Antworten · letzte Antwort am 11. November 2008

Tags: Frage

Snowboada ·

Ich verwende T3 3.8 mit einem HTML-Template und Autoparser...
folgende JS-Anweisung (im HTML-Template) funktioniert nicht und Firebug gibt mir als Fehler "document.getElementById... is null":

<script language="javascript" type="text/javascript">
document.getElementById("druckansicht").style.visibility = "hidden";
</script>

Irgendwie scheint es, als würde JS mein Element "druckansicht" nicht unter

document.getElementById("druckansicht")

erkennen!?!?!

Wäre wirklich toll, wenn jemand eine Idee dazu hätte und mir weiterhelfen könnte.

vielen Dank

LG
Dominik

zappzarapp ·

Hast du einen Link zum ganzen HTML-Code? Die Meldung heißt einfach, dass es kein entsprechendes Element (z.B. <div id="druckansicht"></div>) gibt.

lg

Snowboada ·

nein, leider nicht (virtueller Testserver in einem Firmennetz)
aber es ist genauso wie du vermutet hast -
es gibt ein <div id="druckansicht"></div>, welches auch im erzeugten Quelltext sichtbar ist.

versuche ich ein <h1> über das JS auszublenden bekomme ich den gleichen Fehler.

es hängt denke ich wirklich damit zusammen, dass meine Objekte nicht mit document.getElementById angesprochen werden können.

Bitte um Hilfe!!!!!!!! #paralyzed#

zappzarapp ·

Eine Sache ist mir eingefallen: Führst du dieses Script automatisch mit dem Laden der Seite aus? Sieh dir folgendes Beispiel an:

<script type="text/javascript">
	alert (document.getElementById("druckansicht"));
</script>
<div id="druckansicht"></div>
<script type="text/javascript">
	alert (document.getElementById("druckansicht"));
</script>

Der erste Aufruf erzeugt "null" weil das Element "druckansicht" zu diesem Zeitpunkt noch nicht vorhanden ist. Erst danach ist es vorhanden und kann angesprochen werden.

Eventuell hilft das ja :-)

lg Matthias

Snowboada ·

das wars tatsächlich, ABER
das widerspricht komplett meinen bisherigen Entwicklungen.
Ich habe immer schon Javascript im <HEAD> welches sich auf Elemente im Body bezieht - nichts anderes habe ich hier

kann mir das bitte jemand erklären?

Wenn das wirklich nicht anders gelöst werden kann, wäre das ein großes Problem für meine Vorhaben.

Danke...!

zappzarapp ·

Das musst du dann folgendermaßen lösen:

<!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=iso-8859-1" />
<script type="text/javascript">
	function meineFunktion() {
		alert("alles geladen: "+ document.getElementById("druckansicht"));
	}
	window.onload=meineFunktion;
</script>

<title>Unbenanntes Dokument</title>
</head>

<body>
<div id="druckansicht"></div>
</body>

Mit "window.onload = meineFunktion" wird sichergestellt, dass die Funktion erst aufgerufen wird, wenn die Seite komplett geladen ist - dadurch kann so ein Fehler - wie von dir geschildert - nicht auftreten.

lg Matthias

Snowboada ·

ah Danke!

und wenn ich mit PHP javascript zur laufzeit an einer gew. Stelle einbinden will?

habe nämlich eine typo3-frontend-extension geschrieben, die für versch. Fälle unterschiedliche Elemente ein-/ausblenden soll.

Danke dir/euch!

lg
Dominik

zappzarapp ·

Dann sollte der Javascript-Code möglichst am Ende des Content Bereichs eingebunden werden, nach den Elementen die du Ein/Ausblendest.

lg

Snowboada ·

#angry# bin völlig baff.

kann mir auch jemand eine technische Erklärung dafür geben, warum Javascript hier im Head nichts von html-Elementen in BODY weiß?

in anderen webapplikationen konnte ich das immer so lösen.

zappzarapp ·

Naja.. das Problem tritt nur auf, wenn du das ganze während dem Laden der Website ausführst. Wenn du dann (wenn die Seite geladen ist) ein Element hast, dass auf einen onclick-Event reagiert ist die Website natürlich schon geladen und es kommt zu keinen derartigen Problemen.

Der Browser lädt den HTML Code zeilenweise und führt Javascript (der entsprechend eingebunden ist) sofort aus. Wenn sich das auf Zeilen bezieht die weiter darunter stehen, wurden die vom Browser noch nicht geladen und er "kennt" sie noch nicht.

lg

Snowboada ·

das erschwert die Sache natürlich ordentlich!

nochmals zusammengefasst (auch für mich):

...if (condition1) {

          $content = '<script type="text/javascript"> document.getElementById("druckansicht").style.visibility = "hidden";</script>'; //für Marker ###Typo3Marker###

} else {

          $content = '<script type="text/javascript"> document.getElementById("druckansicht").style.visibility = "visible";</script>'; //für Marker ###Typo3Marker###

}

Ausgabe über Marker:

###Typo3Marker###
<div id="druckansicht">...</>

Das Problem ist, ich könnte hier den Marker nicht weiter unten ansiedeln, da er auch echten Content ausgeben muss (an der Stelle)!

Hat jemand eine Idee, mit der sich das leicht lösen lässt?

Danke!!