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

JavaScript - problem z liczbami od 10 do 90 - zadanie 2 z kursu JS odc. 2

VPS Starter Arubacloud
0 głosów
576 wizyt
pytanie zadane 24 października 2018 w JavaScript przez Vin Nowicjusz (120 p.)

Robiłem zadanie pojawiające się w drugim odcinku kursu JS Pasji Informatyki. Prosty skrypt ma za zadanie wyświetlać liczby z zadanego przedziału. Pojawia się tu jednak, jak dla mnie, dziwny błąd gdy jedna z liczb wyznaczająca ten przedział jest większa od 9, ale mniejsza od ok. 90 (tu jest różnie, czasami 60). Gdy obie liczby wynoszą 9 do 90 skrypt działa już poprawnie. Kombinowałem, co tu może być nie tak, ale ja nie widzę przyczyny, dlaczego działa to w taki dziwny sposób. Pomoże ktoś? :)

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8"/>

	
	<script type="text/javascript">
		
		function listuj_odmniejszej(liczba1, liczba2)
		{
			var lista = "";
		
		
			for(i=liczba1 ; i<=liczba2; i++)
			{
				lista=lista + i + " ";
				
			}
				
			document.getElementById("wynik").innerHTML=lista;
			
		
		}	
		
		
		function listuj_odwiekszej(liczba1, liczba2)
		{
			var lista = "";
			
			for(i=liczba1 ; i>=liczba2; i--)
			{
				lista=lista + i + " ";
				
				
			}
				
			document.getElementById("wynik").innerHTML=lista;
			

		}
		
		
		
		function listuj()
		{
		
			var liczba1 = document.getElementById("pole1").value;
			var liczba2 = document.getElementById("pole2").value;

			if(!isNaN(liczba1))
			{			
				if(!isNaN(liczba2))
				{
					if (liczba1<liczba2)
						listuj_odmniejszej(liczba1, liczba2);
					else if (liczba1>liczba2)
						listuj_odwiekszej(liczba1, liczba2);
					else if (liczba1==liczba2)
						document.getElementById("wynik").innerHTML="Liczby nie mogą być równe";
				}
				else
					document.getElementById("wynik").innerHTML="Z prawej strony nie ma liczby!";
			}
			else if(isNaN(liczba2))
				document.getElementById("wynik").innerHTML="Z obu stron nie ma liczb!";
			else
				document.getElementById("wynik").innerHTML="Z lewej strony nie ma liczby!";
		
		}
		
		
		
		
	
	</script>
	
	
</head>
<body>
	
	<input type="text" id="pole1"/>
	<input type="text" id="pole2"/>
	<input type="submit" value="Drukuj przedział" onclick="listuj()"/> 


	<div id="wynik"></div>


</body>

</html>

 

1 odpowiedź

0 głosów
odpowiedź 24 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)
lista=lista + i + " ";

tutaj Kolego dodajesz do siebie stringi, a nie number :)

W ogóle coś przekombinowane to rozwiązanie...

Jak rozumiem masz zrobić skrypt, który stworzy listę liczb z określonego przedziału w inkrementacji co 1. Można to zrobić prościej, np.:

function numbers (min, max) {
  const result = [];
  if (min > max) { // w razie czego odwracamy min z max
    [min, max] = [max, min];
  }

  for (let i = min; i <= max; i += 1) {
    result.push(i);
  }

  return result.join(','); // tutaj mozesz sobie okreslic dowolny separator
}

numbers(0,5);   //"0,1,2,3,4,5"
numbers(15,30); //"15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30"

Moim zdaniem jest to czytelniejsze rozwiązanie i łatwiejsze w rozbudowie, np. umożliwia łatwe przekazanie do funkcji number wartości o jaką inkrementujemy czy separatora itp.

komentarz 24 października 2018 przez Vin Nowicjusz (120 p.)

Moim celem było dodawanie stringów. Twojego kodu do końca nie rozumiem, ale wydaje mi się, że tu nie ma problemu z kodem, ponieważ, jak teraz sprawdziłem, podobnie zachowuje się skrypt dany w kursie. Oto on: 

<!DOCTYPE html>
<html lang="pl">
<html>
	<head>
		<meta charset="utf-8" />
		
		<script type="text/javascript">
			
			function wypisz()
			{
				var liczba1 = document.getElementById("pole1").value;
				var liczba2 = document.getElementById("pole2").value;
				var napis = "";
				
				for (i=liczba1; i<=liczba2; i++)
				{
					napis = napis + i + " ";
				}
				document.getElementById("wynik").innerHTML = napis;
			}
			
		</script>
		
	</head>
	<body>
	
		<input type="text" id="pole1" />
		<input type="text" id="pole2" />
		<input type="submit" value="Pokaż" onclick="wypisz()"/>
		
		<div id="wynik"></div>
	
	</body>
</html>

Wyświetla poprawnie ciąg dla zakresu np. 2-6 lub 11-17 lub 111-545, ale już nie działa dla 6-12 lub 80-111.

EDIT: Nie działa, tzn., że nic nie wyświetla się.

komentarz 24 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)
No to musisz zastanowić się co się dzieje w Twoim kodzie...

Masz liczby 6 i 12, a porównujesz nie liczby a stringi. Także string "6" jest większy niż "12" ponieważ stringi porównuje się znak po znaku, czyli "6" większe od "1" także pętla w ogóle się nie odpala.

Pracuj na typie numerycznym.
komentarz 24 października 2018 przez Vin Nowicjusz (120 p.)

Dzięki za naprowadzenie na właściwą drogę. Udało mi się to ogarnąć. Wystarczyło zrobić tak: 

var liczba1 = parseInt(document.getElementById("pole1").value);
var liczba2 = parseInt(document.getElementById("pole2").value);

Teraz doceniam języki, gdzie trzeba z góry ustalać typ zmiennej hehe. Rozumiem, źe w kursie zostało to zrobione źle, zapewne przez niedopatrzenie.

komentarz 24 października 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Co do tego kursu to wypowiadalem się już parę razy i zdania nie zmieniłem - jest on zrobiony po prostu źle i nie polecam go nikomu.

Jeśli chcesz typowanie to wejdź w TypeScript. Kiedyś sceptycznie do niego podchodziłem ale powiem Ci, że od pewnego czasu siedzę dość mocno w TS w dużym projekcie i naprawdę doceniam jego zalety nad czystym JS.
komentarz 25 października 2018 przez Vin Nowicjusz (120 p.)
Okej, dzięki. Na pewno zainteresuje się TypeScriptem.

Podobne pytania

0 głosów
0 odpowiedzi 250 wizyt
pytanie zadane 13 sierpnia 2018 w JavaScript przez KlemensGak Bywalec (2,210 p.)
0 głosów
1 odpowiedź 468 wizyt
+1 głos
2 odpowiedzi 284 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...