# Schreibmaschineneffekt :(



## Acriss (29. Juli 2007)

Tag,
habe mir bei selfhtml.org den Artikel über setInterval durchgelesen,
und folgendes geschrieben

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


var aktiv = window.setInterval("Typing()", 1);

var i = 0, text = 1;
function Typing ()
	{
  	if (text == 1) {
	document.write ("H");
	text = 2;
	}
else if  (text == 2) {
	document.write ("A");
	text = 3;
	}
else if  (text == 3) {
	document.write ("L");
	text = 4;
	}
else if  (text == 4) {
	document.write ("L");
	text = 5;
	}
else if  (text == 5) {
	document.write ("O");
	text = 6;
	}
else if  (text == 6) {
	document.write ("!");
	text = 7;
	}


	i = i + 1;
	if (i >= 6)
    	window.clearInterval(aktiv);
	}
</script>
```
Es soll HALLO! schreiben, mit einem Schreibmaschineneffekt.
Doch leider Schreibt es nur H


----------



## Adi | tmine (29. Juli 2007)

hmm also ich kenn mich nicht so aus, aber das ganze musst du meiner Meinung nach in eine Schleife machen


----------



## Quaese (29. Juli 2007)

Hi,

mit *document.write* schreibst Du das Dokument neu, dh. die erste Ausführung wird noch erledigt ("H" ausgegeben).
Anschliessend hast Du nur noch ein Dokument, in dem "H" steht, der Rest ist "gelöscht".

Besser Du erstellst ein HTML-Element und hängst an dessen Ihnalt mit der Eigenschaft *innerHTML* jeweils den neuen
Buchstaben an. Die Funktion *Typing* sollte dann jedoch erst aufgerufen werden, nachdem das Dokument geladen 
wurde (*onload*-Event), da sonst das HTML-Element noch nicht existiert.

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var aktiv = null;
var i = 0, text = 1;

window.onload = function(){
  aktiv = window.setInterval("Typing()", 500);
}

function Typing ()
	{
  	if (text == 1) {
	document.getElementById("outID").innerHTML += ("H");
	text = 2;
	}
else if  (text == 2) {
	document.getElementById("outID").innerHTML += ("A");
	text = 3;
	}
else if  (text == 3) {
	document.getElementById("outID").innerHTML += ("L");
	text = 4;
	}
else if  (text == 4) {
	document.getElementById("outID").innerHTML += ("L");
	text = 5;
	}
else if  (text == 5) {
	document.getElementById("outID").innerHTML += ("O");
	text = 6;
	}
else if  (text == 6) {
	document.getElementById("outID").innerHTML += ("!");
	text = 7;
	}

	i = i + 1;
	if (i >= 6)
    	window.clearInterval(aktiv);
	}
 //-->
</script>
</head>
<body>
  <div id="outID"></div>
</body>
</html>
```
Die Funktion lässt sich aber auch noch komprimierter schreiben:

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var strHallo = "HALLO!";
var aktiv = null;
var i = 0, text = 1;

function Typing (){
  document.getElementById("outID").innerHTML += strHallo.substr(i, 1);

  if (i++ >= 6)
    window.clearInterval(aktiv);
}

window.onload = function(){
  aktiv = window.setInterval("Typing()", 500);
}
 //-->
</script>
</head>
<body>
  <div id="outID"></div>
</body>
</html>
```
Vielleicht hilft Dir das weiter.

Ciao
Quaese


----------



## con-f-use (29. Juli 2007)

Die write()-Methode funktioniert nur richtig, bevor die Seite vollständig geladen ist. Benutzte statt dessen ein <div>-Tag mit einer id, den du über getElementById() ansprichst und dessen innerHTML du veränderst.

Edit:
Fhtagn, da war jemand schneller als ich...


----------



## Acriss (30. Juli 2007)

Ok danke,
auch für die 2te Version, die Tipparbeit spart  sogar erheblich 
Btw:
damit der Effekt "gut" rüberkommt sollte man die Geschwindigkeit auf 50 Microsecunden stellen


----------



## con-f-use (31. Juli 2007)

Kleine Anmerkung am Rande als alter Physiker: Eine Mikrosekunde ist der millionste Teil einer Sekunde, also unglaublich wenig. Da würde der Text schon sofort dastehen. Was du meinst ist Millisekunden, der tausendeste Teil einer Sekunde.


----------

