• 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
143 wizyt
pytanie zadane 1 maja 2017 w JavaScript, jQuery, AJAX przez PindonMniejszy Bywalec (2,700 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 (80,820 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,700 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 (80,820 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,700 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 (80,820 p.)
Nie pomyliłeś aby tematów? :)
komentarz 1 maja 2017 przez PindonMniejszy Bywalec (2,700 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 101 wizyt
pytanie zadane 12 kwietnia 2017 w C i C++ przez Borys Kaczmarek Użytkownik (650 p.)
0 głosów
2 odpowiedzi 473 wizyt
pytanie zadane 18 kwietnia 2015 w PHP, Symfony, Zend przez makoso Mądrala (7,400 p.)
0 głosów
2 odpowiedzi 119 wizyt
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

66,503 zapytań

113,269 odpowiedzi

239,876 komentarzy

46,641 pasjonatów

Przeglądających: 257
Pasjonatów: 7 Gości: 250

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.

...