Funkcja i jej wywołanie w JS, brak błędów!?

pytanie zadane 21 lipca 2018 w JavaScript przez Q7V Gaduła (4,250 p.)

Cześć, mam taki prosty skrypt w JS. Ma ładnie pisać tekst jak normalnie z klawiatury, ale coś nie styka. :P

<html>
<head>
	<link rel="Stylesheet" type="text/css" href="style.css" />
  	<title>Tytuł strony</title>
    <meta name="Description" content="Tu podaj opis twojej strony" />
    <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
		<script>
		var array = ["H","E","L","L","O","."];
		function typing(){
		for(i=0;i>=5;i++){
		setInterval(function(){document.getElementById('typing').innerHTML+=array[i];},200)
		}
		}
		</script>
</head>
<body onload="typing();">
<header>
<p class="pheader" id="typing">

</p>
</header>

Nie ma żadnych błędów, nie wiem gdzie leży problem.

2 odpowiedzi

odpowiedź 21 lipca 2018 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 21 lipca 2018 przez Q7V

Najlepsza

Jest kilka błędów:

w pętli for zamiast warunku >= 5 powinieneś zapisać <= 5 (to już zauważył @Samboor)
setInterval wywoływane jest, gdy pętla skończy działanie, dlatego wypisywać będzie undefined. Jeśli zadeklarujesz iterator pętli słówkiem kluczowym let, wartość iteratora będzie zachowana dla każdego przebiegu pętli
zamiast setInterval bezpieczniej jest użyć setTimeout, ponieważ interwał musisz zatrzymać (inaczej będzie się wykonywał w nieskończoność), a setTimeout wykona się tylko tyle razy, ile będzie przebiegów pętli
czas opóźnienia timeouta pomnóż przez iterator pętli, dzięki temu każda litera będzie zapisana z opóźnieniem 200ms następującym po poprzednim. Obecnie wypisuje wszystkie litery na raz po 200ms

Poprawny zapis funkcji:

function typing() {
  for (let i = 0; i <= 5; i++) {
    setTimeout(function() {
      document.getElementById("typing").innerHTML += array[i];
    }, 200 * i);
  }
}

komentarz 21 lipca 2018 przez Q7V Gaduła (4,250 p.)

Dziękuje bardzo za pomoc, w JS bawiłem się jakiś czas temu, ale złapała mnie amnezja. Niby takie banalne błędy, ale analizowałem ten kod i nie skapnąłem się. :D Jeszcze raz dzięki wielkie za tak fajną odpowiedź! :)