• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

0 głosów
140 wizyt
pytanie zadane 1 maja 2017 w JavaScript, jQuery, AJAX przez PindonMniejszy Bywalec (2,660 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

+1 głos
odpowiedź 1 maja 2017 przez JSHolic Szeryf (79,520 p.)
wybrane 1 maja 2017 przez PindonMniejszy
 
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 PindonMniejszy Bywalec (2,660 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 JSHolic Szeryf (79,520 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 PindonMniejszy Bywalec (2,660 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.
0 głosów
odpowiedź 1 maja 2017 przez spokojny Nałogowiec (28,690 p.)
Node w akcji i Nowoczesne aplikacje internetowe są w miarę ok. Nie są też idealne i nie prowadzą od zupełnych podstaw.

http://helion.pl/kategorie/webmasterstwo/node-js?select=1&sort=2&formaty=&ceny=&wydawca=&jezyk=
2
komentarz 1 maja 2017 przez JSHolic Szeryf (79,520 p.)
Nie pomyliłeś aby tematów? :)
komentarz 1 maja 2017 przez PindonMniejszy Bywalec (2,660 p.)
Dzięki za wskazówkę. Zacznę od Node w akcji.

 Pozdrawiam.
komentarz 1 maja 2017 przez spokojny Nałogowiec (28,690 p.)
PS. Jaką książkę byście polecili do nauki Node.js?

?

Podobne pytania

0 głosów
2 odpowiedzi 100 wizyt
pytanie zadane 12 kwietnia 2017 w C i C++ przez Borys Kaczmarek Użytkownik (650 p.)
0 głosów
2 odpowiedzi 466 wizyt
pytanie zadane 18 kwietnia 2015 w PHP, Symfony, Zend przez makoso Mądrala (7,400 p.)
0 głosów
2 odpowiedzi 114 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

65,642 zapytań

112,267 odpowiedzi

236,889 komentarzy

46,640 pasjonatów

Przeglądających: 159
Pasjonatów: 8 Gości: 151

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...