Pętla while... Co robię nie tak?

pytanie zadane 1 maja 2017 w JavaScript przez Konfeusz Bywalec (2,810 p.)

Dzień dobry.

Z góry przepraszam za trywialny temat i pytanie. Zaczynam uczyć się JS i niestety ten błąd nie daje mi spokoju.

Modyfikuję przykład z książki "... JS. Rusz głową" i staram się zrozumieć mechanikę JS, ale jakoś dojść nie mogę co nie gra.

Tworzę formatkę, gdzie do input w <body> wpisuję wartość która ma zostać przypisana do zmiennej sterującej ilością powtórzeń pętli. Pętla ma za zadanie wypisać w body ilość linii tyle ile jest powtórzeń i na koniec wypisać "koniec".

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="UTF-8"/>
<script type="text/javascript">
function sprawdz() {
var wiersz = document.getElementById("pole").value;
while (wiersz > 0){
document.getElementById("wypisz").innerHTML="wiersz <br>";
}
document.getElementById("wypisz").innerHTML="koniec <br>";
	
}
</script>

</head>
<body>
	<input type="text" id="pole" />
	<input type="submit" value="sprawdz" onclick="sprawdz()" />
<div id="wypisz">
 
</div>
</body>
</html>

Podejrzewam, że może się to wiązać z tym, że pętla wykonywana jest w <head> a nie w <body>. Ale nie mogę tego ugryźć.

PS. Jaką książkę byście polecili do nauki Node.js?

2 odpowiedzi

odpowiedź 1 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 1 maja 2017 przez Konfeusz

Najlepsza

while (wiersz > 0)

Jeśli w zmiennej wiersz siedzi wartość większa od zera, to ta pętla trwa w nieskończoność, bo nigdzie jej nie przerywasz ani nie określasz dodatkowego warunku, który by uniemożliwiał jej wykonanie.

Zamień while na for i ustaw warunek zakończenia na wartość ze zmiennej wiersz. Dodatkowo parsuj zawartość tej zmiennej do typu number.

Poza tym, zamiast stosować operator przypisania, stosuj przypisanie z dodaniem wartości += https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment

, bo przecież nie chcesz nadpisać tego co już wypisałeś inną frazą, tylko dopisać tam coś.

Podejrzewam, że może się to wiązać z tym, że pętla wykonywana jest w <head> a nie w <body>

Zastosowałeś złą praktykę, ale w tym przypadku akurat nie ma to za bardzo znaczenia, gdyż Twój skrypt przeprowadza operacje na danych dopiero, gdy użytkownik kliknie w przycisk.

komentarz 1 maja 2017 przez Konfeusz Bywalec (2,810 p.)

Dziękuje za odpowiedz i wskazanie kierunku... wielce pomocna, bo z miejsca dostrzegłem błąd w moim zapisie. Wiedziałem, że czegoś mi brakuje, a mianowicie obniżenia wartości zmiennej o jeden, czyli:

document.getElementById("wypisz").innerHTML="wiersz <br>";
wiersz = wiersz - 1;

.. bo pętla musi się zakończyć, po ilości powtórzeń równej zadeklarowanej wartości w zmiennej.

Poprawiłem skrypt i znowu nie działa jak chciałem. Po wpisaniu wartości np 3 w polu input i kliknięciu "sprawdz", skrypt przechodzi do lini 11 wypisując "koniec".

Czyli omija pętlę, nie wypisując 3 x "wiersz". Dlaczego tak się dzieje?

Piszesz o złej praktyce. Mianowicie co miałeś na myśli. Lepiej błędy eliminować przed zagnieżdżeniem ich w rutynie. Tak w dwóch, trzech słowach by nadać kierunek myślom.

komentarz 1 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Wrzuć console.log() do tej pętli, aby zobaczyć czy warunek się spełnia i pętla się wykonuje. Jeśli będzie ok, to znaczy, że zapomniałeś zamienić operatora = na += tak jak napisałem wyżej. Po prostu po zakończeniu pętli, w div#wypisz zapisujesz "koniec <br>" i to nadpisuje poprzednie modyfikacje treści (czyli "wiersz <br>") wewnątrz tego <div>.

Piszesz o złej praktyce. Mianowicie co miałeś na myśli

Umieszczanie skryptów w <head> jest złą praktyką. Lecz w tym przypadku, nie wpływa to na wykonanie kodu, tzn. gdy klikając na przycisk odpalasz funkcję sprawdz(), to DOM jest już załadowany, więc problemu z pobraniem elementu nie będzie.

komentarz 1 maja 2017 przez Konfeusz Bywalec (2,810 p.)

:) wielkie dzięki, właśnie skumałem o co chodzi :). Mam przerwę ponad 10 lat w programowaniu (php) i faktycznie, ale to jak jazda na rowerze, niby się nie zapomina, ale jednak brak ćwiczeń i praktyki pozwala by zapominać o takich podstawach jak NADPISANIE.

Zaraz spróbuję z pętlą for.

Dziękuję za Oświecenie. Pozdrawiam.