JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

PhiltheD · 30.08.2012

Hallo!

Ich versuche mich z.Z. an JavaScript, da ich es gerne für Homepages verwenden möchte. Dabei möchte ich nicht gleich jQuery, Lightbox etc. benutzen, sondern es auch verstehen.
Bei allem bin ich noch blutiger Anfänger, was JS angeht.

Bei meinem Problem mit "einfachem Inhalt" handelt es sich um folgende Anwendung:

Code:

// Dynamische Willkommens-Überschrift
willk = new Array();
willk[0] = "Guten Morgen&nbsp;";
willk[1] = "Guten Tag&nbsp;";
willk[2] = "Guten Abend&nbsp;";

function willkommenstext() {

	var besZeit = new Date().getHours();
	if (besZeit < 12) {
		document.write(willk[0]);
	} else if (besZeit < 18) {
		document.write(willk[1]);
	} else {
		document.write(willk[2]);
	}
}

Diese Anwendung funktioniert auch super, aber nur wenn:
die Verlinkung im Head aufgeführt ist

Code:

<script src="lib/js/preload.js"></script>

und
an der entsprechenden Stelle innerhalb der *.html das Script aufgerufen wird:

Code:

<h1 id="will">
 <script>
	willtext();
 </script>
</h1>

Da ich die Struktur, Style und Script komplett voneinander trennen möchte, möchte ich den Aufruf des Scriptes auch komplett auslagern in die *.js, die ich zu Anfang vorgestellt habe.
Habe schon diverse Versuche gestartet mit:

Code:

document.getElementById("will").innerHTML

usw.
allerdings verstehe ich das System offensichtlich noch nicht gut genug, um es so zu implementieren, dass es auch läuft...
Der Text soll einfach nach dem Laden der Seite da stehen.

kann mir vllt. jemand helfen?

Vielen Dank schonmal!

Viele Grüße, Phil

Duddle · 30.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Hmm, ich habe nicht verstanden bei welcher Variante ein Problem aufgetreten ist. Lokal habe ich ausprobiert a) das Script inline in der HTML-Datei, b) extern eingebunden, sowie c) extern eingebunden aber mit innerHTML zu haben. Alle funktionieren wie erwartet.
Aber wahrscheinlich schreibe ich intuitiv den Code und vermeide die Fehler. Deshalb wäre es gut wenn du noch mal dein Ziel genauer beschreibst.

Als mögliche Fehlerquelle sehe ich das document.write(). Dieses ist etwas gemein, da es nur funktioniert wenn es tatsächlich beim Seitenaufbau aufgerufen wird. Schon beim Laden einer Seite wird die JS-Engine gestartet falls entsprechende Anweisungen kommen. Die write()-Funktion schreibt dabei an die aufrufende Stelle ihr Argument - aber nur falls die Seite noch "offen" ist, also noch nicht komplett geladen.
Vergleich beide folgende Code-Auszüge:

HTML:

<body>
    <script type="text/javascript" language="javascript" charset="utf-8">
	function w() {
	    document.write("DOCUMENT WRITE");
	}
	w();
    </script>
    <h1>Hello, World!</h1>	
</body>

Hier wird w() schon beim Laden der Seite ausgeführt und dementsprechend funktioniert es wie erwartet.

HTML:

<body onload="w()">
    <script type="text/javascript" language="javascript" charset="utf-8">
	function w() {
	    document.write("DOCUMENT WRITE");
	}
    </script>
    <h1>Hello, World!</h1>	
</body>

Hier wird w() erst nach vollständigem Laden der Seite aufgerufen. Jetzt wird plötzlich alles im Dokument überschrieben, weil der Datenstrom der Datei schon geschlossen wurde.

Das ist einer der Gründe, weshalb document.write() sehr selten benutzt wird. Du hast ja aber schon die bessere Variante gefunden. Jedes HTML-Element hat ein innerHTML-Attribut. Dieses kannst du frei ersetzen und auslesen, egal wann. Das etwas umgeschriebene Beispiel sähe dann so aus:

HTML:

<body onload="w()">
    <script type="text/javascript" language="javascript" charset="utf-8">
	function w() {
	    document.getElementById("foobar").innerHTML = "innerHTML und so weiter";
	}
    </script>
    <div id="foobar"></div>
    <h1>Hello, World!</h1>	
</body>

Der zweite Hinweis für dich als Anfänger: leg dir FireBug zu, falls du Firefox benutzt. Das gibt dir eine sehr gute Fehlerkonsole und du kannst dir den Quelltext der Seite ganz genau anschauen (auch nach JS-basierten-Modifikationen).

Duddle

Daniel Koch · 30.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Wenn du tatsächlich den Aufruf willtext(); verwendest, kann das nicht funktionieren, da dein Funktionsname willkommenstext() ist.

Viele Grüße
Daniel

PhiltheD · 30.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

ok, dann noch ein paar mehr informationen. =)
das mit dem willtext() und willkommenstext() war nur ein versehen, da ich gleichzeitig den beitrag geschrieben und weitere versuche gestartet habe. dem war nicht so.

was bei mir auch funktioniert ist folgendes; struktur durch html, style in css eingebunden (im beispiel der einfachheit halber ausgelassen) und die dynamischen inhalte (hätte ich gerne, im beispiel aber nicht vollständig getrennt) in einer separaten js-datei.

HTML:

<html>
	<head>
		<title>beispiel1</title>
		<script src="lib/js/preload.js"></script>
	</head>
	<body>
		<div id="contentmain">
<!-- h1 und p sind display:inline -->
			<h1 id="will">
				<script>
					willtext();
				</script>
			</h1>
			<p class="inl">
				und Herzlich Willkommen
			</p>
		</div>
	</body>
</html>

die dazugehörige *.js lautet dann wie schon geschrieben:

Code:

// Dynamische Willkommens-Überschrift
willk = new Array();
willk[0] = "Guten Morgen&nbsp;";
willk[1] = "Guten Tag&nbsp;";
willk[2] = "Guten Abend&nbsp;";

function willtext() {

	var besZeit = new Date().getHours();
	if (besZeit < 12) {
		document.write(willk[0]);
	} else if (besZeit < 18) {
		document.write(willk[1]);
	} else {
		document.write(willk[2]);
	}
}

so weit, so gut. alles funktioniert ist super! das war jetzt, um zu zeigen, was ich später weiterhin erreichen möchte.
jetzt kommt die problemstelle! ich möchte später den html-code in der form haben:

HTML:

<html>
	<head>
		<title>beispiel1</title>
		<script src="lib/js/preload.js"></script>
	</head>
	<body>
		<div id="contentmain">
<!-- h1 und p sind display:inline -->
			<h1 id="will">
			</h1>
			<p class="inl">
				und Herzlich Willkommen
			</p>
		</div>
	</body>
</html>

das heißt, dass nicht die *.html das script aufruft, sondern die im head (oder wo auch immer es nötig ist) eingebundene preload.js das script eigenständig aufruft und den durch die funktion erstellten text "guten morgen " (oder die anderen varianten) eigenständig in die *.html schreibt. und zwar genau innerhalb des durch id="will" gekennzeichneten h1-tags.

ziel ist eine klare trennung von html, css und js.

dafür muss ich eine änderung in der preload.js vornehmen. bisher waren meine versuche jedoch alle ohne erfolg.
ein versuch war:

Code:

// Dynamische Willkommens-Überschrift
willk = new Array();
willk[0] = "Guten Morgen&nbsp;";
willk[1] = "Guten Tag&nbsp;";
willk[2] = "Guten Abend&nbsp;";

function willtext() {

	var besZeit = new Date().getHours();
	if (besZeit < 12) {
		document.write(willk[0]);
	} else if (besZeit < 18) {
		document.write(willk[1]);
	} else {
		document.write(willk[2]);
	}
}
function schreibewilltext () {
   document.getElementById("will").innerHTML = willtext;
   }
window.onload = schreibewilltext;

(ich hoffe, ich habe nicht wieder dumme fehler eingebaut)

ich hoffe, das wird klarer. wenn ihr noch informationen braucht: ich geb sie euch gern! =)

danke!
Phil

PhiltheD · 31.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Wenn ich dich richtig verstehe, willst du also, dass der Aufruf der Funktion automatisch gestartet wird, wenn die Seite fertig geladen ist?

genau so ist es!

Für den Start eines Javascript brauchst du immer eine Art Ereignis, dass die Funktion auslöst - eine Event.
Daher ist es am einfachsten, wenn du einen Event-Handler angibst, der sagt: "wenn das und das passiert, dann starte function xyz()".

ok. mit .innerHTML zeige ich also nur auf die stelle, in der ich etwas machen möchte, und das wars. es passiert also nicht, weil der client nicht weiß, was er damit machen soll. anders gesagt: der client weiß genau was er machen soll, ich habs nur nicht so geschrieben, dass er es so macht, wie ich möchte.

gibt es denn eine art, mein problem zu bewerkstelligen? sozusagen den ablauf:

"wenn die seite geladen wird, dann schreibe mir bitte die funktion willtext () in den h1 mit der id='will' "

und das alles nur von der preload.js aus?

Danke!
Phil

randacek_pro · 31.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Du möchtest also, dass dein Skript sich quasi selbst startet?

Normaler Weise sagt man ja einem Skript, wann es gestartet werden soll. Dazu definiert man eine Ereignis, ein Event. Das kann ein Mausklick sein, oder der Zeitpunkt, wenn ein bestimmtes Element geladen wird, usw.
Daher verwendet man für dieses Event dann einen Eventhandler (onload, onmousedown,...).

Du willst aber, dass das Skript selbstständig den Status der Seite erkennt und sich selbst mit einem Event aufruft?
Wegen der Trennung in HTML und JS (warum eigentlich an dieser Stelle so strikt? ->wenn es doch, wie du schriebst, in deiner ersten Variante geklappt hat?)

Was du machen kannst, ist ein DOMReady-"Event". Das geht, glaube ich aber nur in Verbindung mit einem Framework, wie Mootools...
Es erkennt, dass der DOM-Baum der Seite erstellt wurde und feuert dein Skript ab, was die gewünschte Änderung vornimmt.

Das könnte dann so aussehen - Inhalt der "preload.js": (ich hab's mal noch ein bisschen geändert...)

PHP:

window.addEvent('domready',function(){

var willkommenstext = true;
   
willk = new Array();
willk[0] = "Guten Morgen&nbsp;";
willk[1] = "Guten Tag&nbsp;";
willk[2] = "Guten Abend&nbsp;";

var besZeit = new Date().getHours();
    
    if (besZeit < 12) {
        willkommenstext = willk[0];
    } else if (besZeit < 18) {
        willkommenstext = willk[1];
    } else {
        willkommenstext = willk[2];
    }
    
    document.getElementById("will").innerHTML = willkommenstext;
})

(PHP-Code nur der Darstellung halber verwendet - es ist natürlich JS)
So habe ich das bei mir lokal getestet.

Die HTML sieht so aus:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> Test</title>

  <style type="text/css">
  </style>
  <script type="text/javascript" src="/js/mootools-core-1.4.5.js">
  </script>
  <script type="text/javascript" src="preload.js">
  </script>

</head>
<body>

    <div id="contentmain"> 
           <h1 id="will">
            </h1>
            <p class="inl">
                und Herzlich Willkommen
            </p>
        </div>        
   
  
</body>

</html>

Vielleicht hilft dir das?

Lieber Gruß

Duddle · 31.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Die Aussage "wenn die Seite fertig geladen ist" ist nicht eindeutig. Entweder kann das heißen, dass a) der Dokument-Baum komplett ist oder b) zusätzlich alle Bilder und andere externe Ressourcen geladen sind.

Im ersten Fall reicht ein window.onload-Handler. Im zweiten Fall brauchst du ein domready-Konstrukt, dass zwar selbst geschrieben werden könnte, aber wie von randacek_pro erwähnt in der Regel bei Frameworks mitgeliefert wird.

Duddle

PhiltheD · 31.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

@ randacek_pro und Duddle
vielen dank! das funktioniert super!
allerdings sagt mir firebug:
TypeError: document.getElementById("will") is null
woher diese fehlermeldung kommt, kann ich nicht ganz nachvollziehen.

jetzt würde ich gerne weiter fragen ^^. dadurch verändert sich natürlich das thema des threads.

ist es möglich, mit der gleichen methode externen inhalt einzubinden?
erläuterung:
auf der HP binde ich mit hilfe von AJAX externen inhalt ein. sobald jemand auf einen button/link in der navigationsleiste klickt, frage ich per ajax den inhalt einer externen datei ab und schreibe ihn in das div mit der id="contentmain". natürlich gibt es in der navigation auch den button "startseite".
damit ich nicht die index.html und die externe datei für den button "Startseite" pflegen muss, würde ich gerne die datei auch beim aufrufen der index.html in das div schreiben lassen.
möglicherweise ist das keine normale gangart.

bisher gibt es die folgende abfrage für das beschriebene. funktioniert auch! (hier vereinfacht für ausschließlich den button "startseite", also nicht von der seltsamen switch-case-anwendung verwirren lassen)

PHP:

var xhrOb = ajaxinit();

function sndReq(i) {

	switch(i) {
		// Startseite
		case 0:
			xhrOb.open('get', 'btn0.html', true);
			break;
	}
	xhrOb.onreadystatechange = handleResponse;
	xhrOb.send(null)
}

function handleResponse() {
	if (xhrOb.readyState == 4) {
		document.getElementById("contentmain").innerHTML = xhrOb.responseText;
	}
}

function contentinit() {
	with (document) {
		getElementById("btnClick0").onclick = function() {
			sndReq(0);
		}
	}
}

window.onload = contentinit;

(habe jetzt wegen der schönen darstellung im kommentar PHP für mein JS genutzt)

ist es möglich durch addEvent() die datei btn0.html einzubinden?

Danke!
Phil

Duddle · 31.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

PhiltheD schrieb:
allerdings sagt mir firebug:
TypeError: document.getElementById("will") is null
woher diese fehlermeldung kommt, kann ich nicht ganz nachvollziehen.

Naja, dort steht der Datentyp des Rückgabewertes der Funktion getElementById() ist inkorrekt und dass dieser Rückgabewert "null" ist. "Null" ist ein besonderer Wert, der mit "nichts" gleichgesetzt werden kann und in der Regel auf einen Fehler oder etwas nicht existentes hinweist. In deinem Fall findet getElementById() kein Element mit der id "will".

PhiltheD schrieb:
ist es möglich durch addEvent() die datei btn0.html einzubinden?

Die Funktion dafür hast du ja schon. Im Moment hast du sie nur an den click-Event-Handler vom Element mit der id "btnClick0" gebunden. Es hält dich aber niemand davon ab, diese Funktion separat aufzurufen, z.B. am Ende der contentinit()-Funktion.

Duddle

Tr3icio · 31.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

1. So ein kleines Skript extern zu laden ist ziemlich schlecht, da es langsamer ist, als wenn du es in die HTML-Datei reinschreibst. Einfach das Skript vor dem </body> einfügen und fertig.
2. Mehr als das Event DOMContentLoaded (oder für ältere Browser readystatechange) brauchst du nicht.

PHP:

<script type="text/javascript"> <!-- Type-Angabe für ältere IE Versionen -->
  var onDomReady = function() {
    if (document.readyState !== "complete") {
      return false;
    }

    var element, welcomeText;
    var time = (new Date()).getHours();

    if (time < 12) {
      welcomeText = "Guten Morgen";
    } else if (time < 18) {
      welcomeText = "Guten Tag";
    } else {
      welcomeText = "Guten Abend";
    }

    element = document.getElementById("will");
    element.innerText     = welcomeText;
    element.textContent = welcomeText;
  };

  if (document.attachEvent) {
    document.attachEvent("readystatechange", onDomReady);
  } else {
    document.addEventListener("readystatechange", onDomReady);
  }
</script>

Das sollte in allen Browsern funktionieren.
Ein ganzes Framework nur dafür zu laden ist unnötig. (Ohne Frameworks schreibt man zwar mehr Code, hat am Ende aber meist eine schnellere Seite)

3. Man sollte bei XHR auch immer den Status-Code abfragen. Auch wenn die Datei nicht existiert (400) gilt der Request als fertig.
4. with (siehe funktion contentinit) ist veraltet (wird bald entfernt) + es benötigt in dem hier gezeigten Beispiel mehr Code, als wenn man es direkt ohne schreibt.
5. Wenn du Das Element #contentmain in eine Variable packst (nach dem ersten Request) kannst du es bei weiteren Requests direkt aus der Variable nehmen, was Zeit spart. (Jedes mal das Element im DOM zu suchen dauert lange)
6. Es wäre praktisch beim Klick auf einen Link den vorherigen Request abzubrechen. (abort)

PhiltheD · 31.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

@ Duddle
habe

Code:

window.addEvent('domready', function() {
	sndReq(0);
})

am ende der init() eingebaut. -> läuft! dankeschön!

@ Tr3icio
danke für deine ausführungen! das sind viele informationen auf einmal! ich habe erst vor einer woche angefangen, mich mit JS auseinanderzusetzen. da brauch ich eine weile, um das alles zu verstehen und umzusetzen. darauf ein bisschen eingehen möchte ich trotzdem.

1. So ein kleines Skript extern zu laden ist ziemlich schlecht, da es langsamer ist, als wenn du es in die HTML-Datei reinschreibst. Einfach das Skript vor dem </body> einfügen und fertig.

das script so, wie ich es hier als beispiel gezeigt habe ist nur ein auszug und wird eh noch erweitert. davon abgesehen geht es mir (in der lernphase) noch nicht um die performance, sondern vorrangig darum, was alles möglich ist UND - wie schon geschrieben - sämtlichen script vom html zu trennen, genau so, wie ich css vom html trenne. dass ich nach einer woche lernen kein profi-scripter bin ist ja klar

bei meinen bisher kleinen scriptchen sieht es ja auch so aus, dass der zeitfaktor vernichtend irrelevant ist. obs dann 5 oder 10 millisekunden dauert ist mir im moment wumpe. im geeigneten moment komme ich auf die performance zurück.

2. Mehr als das Event DOMContentLoaded (oder für ältere Browser readystatechange) brauchst du nicht.

muss noch die events und event-handler lernen. hab einfach nicht alle und noch nicht mal die meißten auf dem kasten. ich werds mir sofort anschauen und mich durchfuchsen.

3. Man sollte bei XHR auch immer den Status-Code abfragen. Auch wenn die Datei nicht existiert (400) gilt der Request als fertig.

wie genau das bedeutet, verstehe ich noch nicht. wäre das ein teil in meiner funktion handleResponse? als teil der readyState? da wird ja momentan nur abgefragt ob die anfrage des servers vollständig und korrekt da ist.

4. with (siehe funktion contentinit) ist veraltet (wird bald entfernt) + es benötigt in dem hier gezeigten Beispiel mehr Code, als wenn man es direkt ohne schreibt.

davon habe ich noch nichts gehört und wusste es dementsprechend nicht. habe allerdings foren gefunden, die das behandeln und diese vorgehendsweise war wohl auch 2003 schon nicht empfohlen ^^ ups. =) im echten quelltext habe ich natürlich mehr als einen button und es werden 10 mögliche aufrufe notiert, was aber noch nicht das ende vom lied ist, denn die seite ist noch im aufbau.

5. Wenn du Das Element #contentmain in eine Variable packst (nach dem ersten Request) kannst du es bei weiteren Requests direkt aus der Variable nehmen, was Zeit spart. (Jedes mal das Element im DOM zu suchen dauert lange)

i will do it! =)

6. Es wäre praktisch beim Klick auf einen Link den vorherigen Request abzubrechen. (abort)

hier stehe ich wieder auf dem schlauch. wie muss ich das genau einbinden?

man, ich hab echt noch viel zu lernen =)

Duddle · 31.08.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

PhiltheD schrieb:
3. Man sollte bei XHR auch immer den Status-Code abfragen. Auch wenn die Datei nicht existiert (400) gilt der Request als fertig.

Zum Vergrößern anklicken....

wie genau das bedeutet, verstehe ich noch nicht. wäre das ein teil in meiner funktion handleResponse? als teil der readyState? da wird ja momentan nur abgefragt ob die anfrage des servers vollständig und korrekt da ist.

Wie jedes Objekt hat das XMLHttpRequest-Objekt mehrere Methoden/Funktionen und Eigenschaften/Attribute, die du ausführen bzw. auslesen kannst. Ein Attribut ist dabei "status", welches dem HTTP-Statuscode der Anfrage entspricht.

Duddle

PhiltheD · 01.09.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

ok. ich versuche das noch alles zu verstehen und nachvollziehen und natürlich umzusetzen. bis hier hin möchte ich mich schon mal recht herzlich bedanken!!!

eine frage habe ich noch, bis mein wissensdurst gestillt ist.

sagen wir, beide meiner vorgestellten problemfälle kommen zusammen. dann stellt sich mir die frage:

wie kann ich JS auf *.html anwenden, den ich mit AJAX nachgefordert habe?
soweit ich weiß machen die browser zicken, wenn ich versuche script mit AJAX nachzufordern. (andernfalls bin ich auf der kenntnisstrecke hängengeblieben. dann bitte klärt mich auf.) ich fordere also den content der startseite mit hilfe von AJAX nach und möchte, dass dort ein script (beim schreiben des inhalts von der nachgeforderten *.html in den "contentmain"-bereich) ausgeführt wird. wie kann ich das bewerkstelligen?

liebe grüße
phil

Duddle · 01.09.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Sobald der Inhalt eingesetzt ist, kannst du ihn so weit ich weiß genauso behandeln als ob er dort schon immer war - Funktionen aufrufen, Elemente ansprechen, etc. Die einzige Ausnahme die mir jetzt spontan einfällt sind Event-Handler, aber da bin ich mir auch nicht sicher.

Duddle

PhiltheD · 02.09.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Das Beispiel mit dem Willkommenstext habe ich so noch nicht aufrufen können. liegt das dann am zeitpunkt der abfrage? (versucht habe ich es natürlich wieder mit dem eigenständigen ausführen des scripts beim laden der seite)

Duddle · 02.09.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Wie sieht dein Code mittlerweile aus? Welche Fehlerabfragen geben welche Fehlermeldung aus, wenn überhaupt?
Die Aussage "funktioniert nicht" ist nicht aussagekräftig genug.

Duddle

PhiltheD · 17.09.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

hi, da bin ich wieder. konnte leider lange gar nicht am pc arbeiten.
jetzt versuche ich aufzuarbeiten, was liegenblieb und versuche die punkte auf dem post von Tr3icio noch mal anzugehen.

habe jetzt den aufruf des dynamischen willkommenstextes mit in den XMLHttpRequest gepackt. dort sieht es folgendermaßen aus:

PHP:

// css-code
var xhrOb = ajaxinit();
function sndReq(i) {

    switch(i) {
        // Startseite
        case 0:
            xhrOb.open('get', 'btn0.html?z=' + Math.random(), true);
            break;
        // alle anderen Fälle wg. Einfachheit nicht aufgeführt
    }
    xhrOb.onreadystatechange = handleResponse;
    xhrOb.send(null)

}

function handleResponse() {
    var readyContentBox = document.getElementById("contentmain");
    if (xhrOb.readyState == 4) { 
        readyContentBox.innerHTML = xhrOb.responseText;
    }
    // Aufruf des Willkommenstextes auf der Startseite.
    // Sollte der Fall sndReq(0) eintreten, 
    // bzw.
    // ist das Element mit der ID "will" geladen,
    // muss der
    // Willkommenstext anschließend geschrieben werden!
    var willtext = true;

     willk = new Array();
     willk[0] = "Guten Morgen&nbsp;";
     willk[1] = "Guten Tag&nbsp;";
     willk[2] = "Guten Abend&nbsp;";

     var besZeit = new Date().getHours();
     if (besZeit < 12) {
     willtext = willk[0];
     } else if (besZeit < 18) {
     willtext = willk[1];
     } else {
     willtext = willk[2];
     }

     document.getElementById("will").innerHTML = willtext;
    // Ende - Aufruf Willkommenstext
}

function contentinit() {
    document.getElementById("btnClick0").onclick = function() {
        sndReq(0);
    }
    // Aufruf für index.html
    if (document.attachEvent) {
        document.attachEvent("readystatechange", sndReq(0));
    } else {
        document.addEventListener("readystatechange", sndReq(0));
    }
}

window.onload = contentinit;

das funktioniert auch!

dazu zwei sachen:
1. Firebug zeigt mir immer noch an
>>TypeError: document.getElementById("will") is null<<
obwohl das Element ja definitiv geladen und erkannt wurde, denn der Inhalt wurde auch eingesetzt (denke, dass diese konsequenz richtig ist). ich weiß nicht, ob das weitere auswirkungen hat, aber mich irritiert es.

2. und das ist auch im quelltext auskommentiert:
momentan wird bei jedem click auf einen beliebigen button das "willkommensscript" ausgeführt, was ja ziemlich dämlich ist. wie kann ich das unterbinden, damit das script nur geladen wird, wenn sndReq(0) geschickt wurde, beziehungsweise #will existiert?

vielen dank und viele grüße,
Phil

Duddle · 18.09.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

Du hast dir hier ein prima Problem geschrieben. Wahrscheinlich hast du selbst schon gemerkt, dass verschiedenste Ansätze alle irgendwann anecken.

Zuerst solltest du die Willkommens-Funktion ausklammern, schließlich hat sie überhaupt nichts mit handleResponse() zu tun. Zweitens solltest du sie sich periodisch selbst aufrufen lassen um zu sehen ob das Element mit id "will" existiert:

PHP:

function welcome() {
    var elem = document.getElementById("will");
    if(!elem) {
	setTimeout(welcome, 100);
	return;
    }
    var willtext = true;

    willk = new Array();
    willk[0] = "Guten Morgen&nbsp;";
    willk[1] = "Guten Tag&nbsp;";
    willk[2] = "Guten Abend&nbsp;";

    var besZeit = new Date().getHours();
    if (besZeit < 12) {
	willtext = willk[0];
    } else if (besZeit < 18) {
	willtext = willk[1];
    } else {
	willtext = willk[2];
    }

    elem.innerHTML = willtext;
}

Das neue ist hier nur das setTimeout, welches aller 100ms die gleiche Funktion wieder aufruft. Jetzt musst du nur noch welcome() wie gewünscht starten:

PHP:

document.getElementById("btnClick0").onclick = function() {
    sndReq(0);
    welcome();
}

Zweitens ist dein Code für die Event-Listener auf readystatechange nicht in Ordnung. Wenn du es so machst:

PHP:

        document.attachEvent("readystatechange", sndReq(0));

wird sndReq(0) beim Lesen dieser Zeile ausgeführt und dessen Rückgabewert an readystatechange gehangen. Dieser Parameter muss eine Funktion sein, also

PHP:

        document.attachEvent("readystatechange", sndReq);

Falls du einen Parameter brauchst, musst du eine anonyme Funktion nutzen:

PHP:

        document.attachEvent("readystatechange", function() { sndReq(0); });

Gleiches gilt für den else-Fall mit addEventListener.

Ich habe aber nicht ganz verstanden warum du überhaupt das sndReq dort dranhängen willst. Möchtest du sndReq(0) auf jeden Fall beim Seitenstart aufrufen? Falls ja, schreib es doch einfach an das Ende der contentinit()-Funktion.

Duddle

PhiltheD · 19.09.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

oh wow... ich bin definitiv schnell an grenzen gestoßen. mit dem timeout klappts super!
den sndReq(0) habe ich an die contentinit() gehängt (da hatte ich einen knoten im kopf...). da sndReq(0) die den inhalt der index.html bzw der absoluten startseite, sowie des homebuttons lädt und nur da der willkommenstext auftaucht, habe ich da auch welcome() rangehängt.

jetzt gibts nur noch eine sache, die wieder mit der welcome()-funktion zusammenhängt. wenn ich nun die startseite geladen habe und anschließend erneut die startseite lade, hat das script keinen effekt. wenn ich noch einmal auf eine andere seite geklickt habe und anschließend auf die startseite läuft es wieder. erneutes klicken auf die startseite und der welcometext wird nicht angezeigt.
wenn also zwei mal der sndReq(0) abgefeuert wird und somit der komplette baum schon geladen wurde (im script folgt auf sndReq(0) immer die welcome()) scheint die funktion welcome() nicht mehr abzufeuern. oder sie lädt den text in den alten knotenbaum, das script ist zufriedengestellt und wird nicht wieder ausgeführt.
ich kanns mir nicht erklären.

dankeschön nochmal!

PhiltheD · 19.09.2012

AW: JS Problem beim ausgeben einfacher Inhalte aus externer JS-Datei

wenn ich den setTimeout nicht an die Bedingung binde, dass das Element nicht da ist, tritt der fehler nicht auf.
ist es dann sinnvoll das ganze in einer if-bedingung zu formulieren?

was ich beschrieben habe, ist passiert, weil der xmlhttprequest länger gedauert hat, als das schreiben des willkommenstextes in dem fall, dass das element schon da war.

sollte ich die bedingung also besser erweitern, oder einfach weg lassen?

liebe grüße,
phil