js input undefined

pytanie zadane 11 lipca 2020 w JavaScript przez lujasjeden Użytkownik (860 p.)
zmienione kategorie 11 lipca 2020 przez Arkadiusz Waluk

To jest program, który pobiera 2 liczby od uzytkownika i wypisuje wszystkie liczby z przedzialu tych liczb.

<!DOCTYPE html>
<html lang="pl">
<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 = "";
			
			if (liczba1>liczba2) napis="Liczba1 nie moze byc wieksza niz Liczba2";
			else if 
		
			else
			{
				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="pokaz" onclick="wypisz()" />
	<div id="wynik"></div>
</body>
</html>

Mam zabezpieczenie zeby liczba1 nie byla wieksza od liczba2 i chce jeszcze zabezpieczenie na wpisywanie liter probowalem tak:

else if (typeof liczba1!='number' || typeof liczba2!='number) napis="To nie liczby";

Ale liczba1 i liczba2 pozostaja undefined nawet jak wpisze sie jakies liczby w ich miejsca. Jak to rozwiazac najlepiej? Dlaczego to pozostaje undefined a nie zmienia sie w number albo w string jak sie wpisze litery?

3 odpowiedzi

odpowiedź 11 lipca 2020 przez creend Gaduła (4,700 p.)

1. Zmień kategorie wpisu z C i C++ na JavaScript

2. Dane z input[type=text] zwracają jak sama nazwa mówi text, czyli string. Więc else if (typeof liczba1!='number' || typeof liczba2!='number) Zawsze się wykona. Przy poborze danych sparsuj je na inta funkcją parseInt lub znakiem +:

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

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

komentarz 11 lipca 2020 przez creend Gaduła (4,700 p.)

Jeżeli to zrobisz if sprawdzający czy podane dane to liczby się zmieni na :

else if ((!liczba1 && liczba1 != 0) || (!liczba2 && liczba2 != 0)) napis = "To nie liczby";

To z powodu, że jeśli sparsujesz na inta string 'naprzyklad' to będzie w zmiennej przechwywana wartość NaN a jej typeof wynosi 'number'

komentarz 12 lipca 2020 przez lujasjeden Użytkownik (860 p.)
edycja 12 lipca 2020 przez lujasjeden

Nie rozumiem tego warunku co napisales i w sumie nie zadzialalo, ale zrobilem na 2 inne sposoby jeden dostalem w odpowiedzi tu na forum pod innym postem a drugi wzialem twoja rade z parseInt i inny warunek. Kody:

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	
	<script type="text/javascript">
		function wypisz()
		{
			var liczba1 = document.getElementById("pole1").value *1
			var liczba2 = document.getElementById("pole2").value *1
			var napis = "";
		
			if (liczba2>=liczba1)
			{
				for (i=liczba1; i<=liczba2; i++)
				{
					napis = napis + i + " ";
				}
			}
			else if (liczba1>=liczba2)
			{
				for (i=liczba1; i>=liczba2; i--)
				{
					napis = napis + i + " ";
				}
			}
			else if (isNaN(liczba1)) 
			{
                napis="Wartość z pola Liczba1 nie jest liczbą";
			}
			else if (isNaN(liczba2))
			{
				napis="Wartość z pola Liczba2 nie jest liczbą";
			}
			document.getElementById("wynik").innerHTML = napis;
			
		}
	</script>
</head>
<body>
	<input type="text" id="pole1" />
	<input type="text"id="pole2"  />
	<input type="submit" value="pokaz" onclick="wypisz()" />
	<div id="wynik"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	
	<script type="text/javascript">
		function wypisz()
		{
			var liczba1 = parseInt(document.getElementById("pole1").value)
			var liczba2 = parseInt(document.getElementById("pole2").value)
			var napis = "";
		
			if (liczba2>=liczba1)
			{
				for (i=liczba1; i<=liczba2; i++)
				{
					napis = napis + i + " ";
				}
			}
			else if (liczba1>=liczba2)
			{
				for (i=liczba1; i>=liczba2; i--)
				{
					napis = napis + i + " ";
				}
			}
			else if (Number.isInteger(liczba1)==false)
			{
				napis="Wartość w polu liczba1 nie jest liczbą całkowitą";
			}
			else if (Number.isInteger(liczba2)==false)
			{
				napis="Wartość w polu liczba2 nie jest liczbą całkowitą";
			}
			document.getElementById("wynik").innerHTML = napis;
			
		}
	</script>
</head>
<body>
	<input type="text" id="pole1" />
	<input type="text"id="pole2"  />
	<input type="submit" value="pokaz" onclick="wypisz()" />
	<div id="wynik"></div>
</body>
</html>

Dzieki za pomoc :D

odpowiedź 13 lipca 2020 przez Ilya Dimow Obywatel (1,240 p.)

Możesz sprawdzać przez REGEX

/^-?\d+\.?\d*$/.test(liczba1) // dla wszystkich liczb

/^-?\d+$/.test(liczba) // tylko dla int

na przykład (na podstawie twojego kodu):

function stwórzNapis() {
  var liczba1 = document.getElementById("pole1").value;
  var liczba2 = document.getElementById("pole2").value;
  var napis = "";
  if (!/^-?\d+\.?\d*$/.test(liczba1)) {
    return "Wartość z pola Liczba1 nie jest liczbą";
  }

  if (!/^-?\d+\.?\d*$/.test(liczba2)) {
    return "Wartość z pola Liczba2 nie jest liczbą";
  }

  liczba1 = Number(liczba1);
  liczba2 = Number(liczba2);
  if (liczba2 >= liczba1) {
    for (i = liczba1; i <= liczba2; i++) {
      napis = napis + i + " ";
    }
  } else {
    for (i = liczba1; i >= liczba2; i--) {
      napis = napis + i + " ";
    }
  }
  return napis;
}

function wypisz() {
  document.getElementById("wynik").innerHTML = dajTekst();
}

komentarz 13 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Po co bawić się RegExpem, skoro liczbę całkowitą można sprawdzić metodą Number.isInteger?

odpowiedź 11 lipca 2020 przez Dani3l Bywalec (2,160 p.)

No bo musisz dać tagi `<script>` na koniec tagu `<body>` albo stworzyć nowy plik i użyć <script src ='nazwa.js'> na końcu body lub w tagu `<head>` z atrybutem `defer` - <srcipt src ='nazwa.js' defer>. Bo teraz to tak jakby pobierasz te elementy zanim one się zrenderują.

1	komentarz 11 lipca 2020 przez creend Gaduła (4,700 p.) Masz po części rację lecz kod JS wykonuje się dopiero po kliknięci buttona, czyli po załadowaniu HTML'a więc tu nie ma błędu