Porównywanie liczb

0

Witam, zaczynam przygodę z JavaScriptem, więc problem wydaje się być banalny, ale nie do końca go rozumiem. Chodzi o to, że w funkcji pobieram 2 dane z formularza (w założeniu liczby) i przypisuję je do zmiennych liczba1 i liczba2, a następnie w "ifach" je porównuję. I tutaj pojawia się problem. Jeśli, np. w pierwszym inpucie wpiszę, :"5", a w drugim :"10" to wykonują się instrukcje z if (liczba1>=liczba2). Podobnie jest, kiedy w inputach wpiszę ciąg znaków zamiast liczby. Samo porównanie raczej działa dobrze, bo gdy nie pobierałem danych z inputów do zmiennych, tylko od razu im przypisywałem wartości to działało dobrze. Podejrzewam w tym przypadku funckję getElementById(). Mógłby ktoś wyjaśnić o co chodzi, dlaczego przy pobieraniu danych z inputów, wychodzą wyniki, że 5 jest większe od 10? Jak trochę przeanalizowałem przykłady jakie mu wysyłałem to wydaje się jakby porównywał pierwsze cyfry do siebie (tak działa chyba porównywanie zmiennych string(?), jeśli coś takiego w ogóle jest), w tym przypadku '5' i '1' i na tej podstawie stwierdzał, że 5 jest większe od 10, bo '5' jest większe od '1'. Dodam jeszcze tylko, że zadanie pochodzi z odc. 2 kursu pana Zelenta, i po pobraniu jego kodu i wypróbowaniu na tych samych przykładach efekt jest ten sam. Co jeszcze bardziej mnie zastanawia. Cały kod poniżej:

<!DOCTYPE HTML />

<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>Część druga drugiego odcinka JavaScript</title>
	
	<script type="text/javascript">
	function pokaz()
	{
		var liczba1;
		var liczba2;
		var napis="";
		liczba1 = document.getElementById("liczba1").value;
		liczba2 = document.getElementById("liczba2").value;
		
		if (liczba1>=liczba2)
		{
			document.getElementById("odpowiedz").innerHTML = "Liczba podana w polu po lewej stronie musi być mniejsza od tej podanej w polu po prawej stronie";
		}
		else if (liczba1<liczba2)
		{
			for (i=liczba1; i<=liczba2; i++)
			{
				napis = napis + i + " "
			}
			document.getElementById("odpowiedz").innerHTML = napis;
		}
		else
		{
			document.getElementById("odpowiedz").innerHTML = "Nie rozumiem! Możesz podać liczby w obu polach?"
		}
	}
	</script>
</head>
<body>
	<h3>Podaj 2 liczby w polach poniżej, a ja pokażę wszystkie liczby znajdujące się pomiędzy nimi.<br /> Pamiętaj, żeby tą mniejszą podać w polu po lewej stronie</h3>
	<input type="text" id="liczba1" />
	<input type="text" id="liczba2" />
	<input type="submit" id="pokaz" value = "Pokaż" onclick="pokaz()" />
	<div id="odpowiedz"> </div>
</body>
</html>

3

Taka uwaga - tematy związane z JavaScript/HTML najlepiej jest wrzucać na http://jsfiddle.net. W ten sposób każdy oglądający ma działającą wersję, nie musi niczego kopiować czy zapisywać, od razu może zobaczyć kod w działaniu oraz nanieść poprawki.

Zrobiłem to za Ciebie - https://jsfiddle.net/q0Levs76/

1

A rozwiązując Twój problem - zmień dwie linie w funkcji pokaz() na następującą postać:

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

A następnie daj znać, czy rozumiesz co ten zapis oznacza oraz dlaczego skrypt się zachowywał niezgodnie z oczekiwaniami, kiedy miał stworzoną przez Ciebie postać.

1

Po pierwsze nie słyszałem jeszcze o tym jsfiddle, także sorki za kłopot i obiecuję poprawę :D
Po drugie dzięki za rozwiązanie, bo teraz działa jak należy.
A po trzecie to rozumiem to tak, że właściwość value jest zmienną innego typu niż int, może string(?) (jeśli w ogóle nazwy zmiennych, które poznałem w c++ mogę używać w odniesieniu do JS, gdzie z tego co na razie się uczyłem są same vary) i dlatego porównywanie działało źle. A funkcja parseInt, z tego co się doczytałem na we3schools zamienia (albo próbuje zamienić) stringa na inta, przez co zmienna liczba1 i liczba2 są już zapisane jako inty i podlegają porównywaniu tak jak liczby.

0

screenshot-20190129162027.png)
.
.
ORAZ
.
.
screenshot-20190129162219.png
.
.
ORAZ
.
.
screenshot-20190129162248.png

1

właściwość value jest zmienną innego typu niż int, może string(?)

Co do tego fragmentu - masz rację, w JS istnieje typ danych string, dobrze go nazwałeś/zgadłeś. Do poczytania o typach zmiennych w JavaScript - https://javascript.info/types. Żeby było śmieszniej, JS nie ma typu znakowego (odpowiednik char z C++), wszystkie teksty muszą być zapisane jako string, a jeśli chcesz zapisać pojedynczy znak, to masz string o długości 1 znaku :D

0

Dręczy mnie ten problem od wczoraj - również obejrzałem ten sam odcinek Pana Zelenta.
Nie mogłem w to uwierzyć, że dla JS 10 jest mniejsze od 2! Na początku mocno się dziwiłem, że kod nie działa tak, jak powinien...

Czy nie lepiej użyć parseFloat? Wtedy nie tracimy cyfr po przecinku, np. po 2.5 pozostanie 2.5 (po parseInt zostanie 2).

Trzeba tylko pamiętać, że parse(Int/Float) przerobi taki np. krzaczek "24dfwndufb" na 24.

1

Zależy od celu jaki chcesz osiągnąć.Jeśli porównujesz dajmy na to liczbę posiadanych krów przez użytkownika to sory ale 1/3 krowy nie istnieje i to brednia i potrzebujesz sprawdzać to i używać int. Jeśli porównujesz nie wiem ciastka i ktoś może mieć połowę ciastka ma to sens w innym wypadku nie ma sensu tego używać. Czasem też możesz chcieć aby Ci ucieło. Zależy od tego co chcesz zrobić ważne by robić to ŚWIADOMIE. Zresztą to uniwersalna rada dotycząca nie tylko programowania. Cokolwiek robisz, rób świadomie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1