[JavaScript] Text zeichenweise erscheinen lassen
Hallo!
In dem nachfolgenden HTML-Code wird beim Laden der Seite die JavaScript-Funktion appear('greeting') aufgerufen. Der angegebene Parameter "greeting" bezeichnet die ID einer Überschrift ersten Grades.
Die Funktion speichert den Text dieses H1-Elements in der Variable "Text" und entfernt anschließend den Text innerhalb des H1-Elements.
Nun wird eine for-Schleife, beginnend bei 0, so oft durchlaufen, bis die Zählervariable den Wert der Textlänge erreicht hat.
Bei jedem Schleifendurchlauf nimmt die Variable "Letter" ein Zeichen des Textes von der Position entsprechend der Zählervariable an und soll mit einer Verzögerung von 100 ms wieder in das H1-Element geschrieben werden.
Die Funktion an sich funktioniert, solange man die Methode window.setTimeout() weglässt. Natürlich werden dann alle Zeichen unmittelbar in das H1-Element geschrieben. Verwende ich aber den Timeout, wird gar kein Text in das H1-Element geschrieben.
Meine Frage lautet also: Was mache ich falsch? Ich hoffe, ihr könnt mir da weiterhelfen.
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text zeichenweise erscheinen lassen</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script type="text/javascript">
//<![CDATA[
function appear(Id)
{
var Text = document.getElementById(Id).firstChild.data;
document.getElementById(Id).firstChild.deleteData(0, Text.length);
for (i = 0; i < Text.length; i++)
{
var Letter = Text.substring(i, i+1);
window.setTimeout('document.getElementById(' + Id + ').firstChild.appendData(' + Letter + ')', 100);
}
}
//]]>
</script>
</head>
<body onload="appear('greeting');">
<h1 id="greeting">Willkommen aus dieser Website!</h1>
<p>Hier steht der Seiteninhalt...</p>
</body>
</html>
Gruß
CaptainAlphabet
