Pętla for - raz działa raz nie.

pytanie zadane 5 kwietnia 2015 w JavaScript przez sko Użytkownik (500 p.)

Witam Wszystkich,
Mam takie pytanie do kodu poniżej tzn. do części w <script> Nie wiem dlaczego pętle for raz działają dobrze, a raz nie? 


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

</head>
<body>
<fieldset style="width:500px">
	<input type="text" id="pole1" value="" />
	<input type="text" id="pole2" value="" />
	<input type="submit" value="Wypisz" onclick="wypisz()"/>
	<div id="wynik"></div>
	<div id="aa"></div>
	<div id="bb"></div>
</fieldset>
<script type="text/javascript"> 
	<span style="color:#B22222">function wypisz()
	{
		var liczba1=document.getElementById('pole1').value;
		var liczba2=document.getElementById('pole2').value;
		var napis="";
		if((isNaN(liczba1)==false) && (isNaN(liczba2)==false))
		{
			if(liczba1<=liczba2) 
			{	
				for(i=liczba1; i<=liczba2; i++)
				{
					napis=napis+i+" ";
				}
				document.getElementById('wynik').innerHTML=napis;
			}
			else if(liczba1>liczba2)
			{
				for(i=liczba1; i>=liczba2; i--)
				{
					napis=napis+i+" ";
				}
				document.getElementById('wynik').innerHTML=napis;
			}
		}
		else
		{
			if((isNaN(liczba1)==true) && (isNaN(liczba2)==false))
				document.getElementById('wynik').innerHTML="Wartość w lewym polu nie jest liczbą";
			else if((isNaN(liczba1)==false) && (isNaN(liczba2)==true))
				document.getElementById('wynik').innerHTML="Wartość w prawym polu nie jest liczbą";
			else if((isNaN(liczba1)==true) && (isNaN(liczba2)==true))
				document.getElementById('wynik').innerHTML="Wartość w lewym i prawym polu nie są liczbami";			
		}
	}
</script></span>
</body>

</html>

5 odpowiedzi

odpowiedź 5 kwietnia 2015 przez arkus Bywalec (2,160 p.)
wybrane 7 kwietnia 2015 przez sko

Najlepsza

Tak jak pisałem wcześniej w komentarzu, problem był z porównaniem pobranych wartości, tzn liczba1 i liczba2.

Najprawdopodobniej były one porównywane jako ciąg znaków, dlatego np. według skryptu 29 < 7.

Dlatego dodałem przy zmiennych liczba1, liczba2 funckcję parseInt(), która zapisuje do zmiennej wartość w postaci liczby. Więcej o funkcji tutaj: http://www.w3schools.com/jsref/jsref_parseint.asp

Zmieniłem dodatkowo pola na typ number.

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8"/>
 
</head>
<body>
<fieldset style="width:500px">
    <input type="number" id="pole1" value="0" />
    <input type="number" id="pole2" value="0" />
    <input type="submit" value="Wypisz" onclick="wypisz()"/>
    <div id="wynik"></div>
    <div id="aa"></div>
    <div id="bb"></div>
</fieldset>
<script type="text/javascript"> 
	function wypisz()
    {
        var liczba1 = parseInt(document.getElementById('pole1').value);
        var liczba2 = parseInt(document.getElementById('pole2').value);
        var napis="";
        if((isNaN(liczba1)==false) && (isNaN(liczba2)==false))
        {
            if(liczba1 < liczba2) {
				for(i = liczba1; i <= liczba2; i++) {
					napis = napis + i + " ";
				}
			} else {
				for(i = liczba1; i >= liczba2; i--) {
					napis = napis + i + " ";
				}
			}
			document.getElementById('wynik').innerHTML = napis;
        }
        else
        {
            if((isNaN(liczba1)==true) && (isNaN(liczba2)==false))
                document.getElementById('wynik').innerHTML="Wartość w lewym polu nie jest liczbą";
            else if((isNaN(liczba1)==false) && (isNaN(liczba2)==true))
                document.getElementById('wynik').innerHTML="Wartość w prawym polu nie jest liczbą";
            else if((isNaN(liczba1)==true) && (isNaN(liczba2)==true))
                document.getElementById('wynik').innerHTML="Wartość w lewym i prawym polu nie są liczbami";         
        }
    }
</script>
</body>
 
</html>

Napewno da się to lepiej napisać, ale nie robiłem zbyt dużo w JS :)

komentarz 5 kwietnia 2015 przez sko Użytkownik (500 p.)

Teraz jest git. Dzięki wielkie.

komentarz 5 kwietnia 2015 przez arkus Bywalec (2,160 p.)

Jeszcze zauwazyłem, że chciałeś zmienić kolor wyniku (tak przypuszczam) używając znacznika span w script. To tak nie działa :) Najłatwiejszym sposobem jest ten atrybut style skopiować do diva wynik :)

<div id="wynik" style="color: #B22222"></div>

komentarz 5 kwietnia 2015 przez Virzen Użytkownik (760 p.)

@sko
Jeżeli odpowiedź rozwiązała Twój problem, oznacz ją proszę jako najlepszą. Dla potomności.

odpowiedź 5 kwietnia 2015 przez Pan Kulomb Pasjonat (18,630 p.)

odpowiedź 5 kwietnia 2015 przez Ursan Bywalec (2,920 p.)

Co ten program ma robić?

komentarz 5 kwietnia 2015 przez arkus Bywalec (2,160 p.)

Z tego co widzę, to wypisuje liczby z przedziału od pole1 do pole2.

komentarz 5 kwietnia 2015 przez sko Użytkownik (500 p.)

To żaden program :). Tak treningowo robię sobie różne rzeczy ucząc się jednosześnie JS.

Rzeczywiście wypisuje wartości od pole1 do pole2.

Problem pojawia się np. w takiej sytuacji:

pole1=1 i pole2=11 - jest ok. dostaje ciąg liczb.

Potem pole1=11 i pole2 = 2 i tu już nie działa. W wyniku dostaję tylko liczbę 11.

Gdy zmienię pole2 = 1 to wtedy działa.

komentarz 5 kwietnia 2015 przez arkus Bywalec (2,160 p.)

Własnie testuję, skrypt dostaje dobre wartości, zaraz pokombinuję dlaczego np. dla pary 29 i 7 nie działa, a dla 29 i 10 juz tak.

Ogólnie, przy parze 29 i 7 skrypt wchodzi w if(liczba1<=liczba2).

Wydaję mi się, że to problem pobierania danych, pobierany jest ciąg znaków, a nie liczba.

komentarz 5 kwietnia 2015 przez sko Użytkownik (500 p.)

jakoś definiowanie wszystkich typów zmiennych przez var do mnie na razie nie przemawia.

C++ tak nie bzikuje :)

komentarz 5 kwietnia 2015 przez Ursan Bywalec (2,920 p.)

Zobacz moją odpowiedź, to zobaczysz dlaczego zostawiłem JS. W innych językach nie mam takich problemów... A podobno..." W C++ możemy bohatersko rozwiązywać problemy...nieznane w innych językach programowania..."

odpowiedź 5 kwietnia 2015 przez Ursan Bywalec (2,920 p.)

function wypisz()
{
var liczba1=document.getElementById('pole1').value;
var liczba2=document.getElementById('pole2').value;
var liczba;
var str = "";
liczba = liczba1;
	if((isNaN(liczba1)==false) && (isNaN(liczba2)==false))
	{
		if(liczba1 > liczba2)
		{
			for(var i = (liczba1-1); i >= liczba2;i--)
			{
				liczba +=" "+i+" "; // NIELOGICZNE
			}
		}
		else
		{
			for(var i = (liczba1);i<=liczba2;i++)
			{
				liczba +=" "+i+" "; // NIELOGICZNE
			}
		}
		document.getElementById('wynik').innerHTML = liczba; // NIELOGICZNE
	}
	else
	{
	if((isNaN(liczba1)==true) && (isNaN(liczba2)==false))
		document.getElementById('wynik').innerHTML="Wartość w lewym polu nie jest liczbą";
	else if((isNaN(liczba1)==false) && (isNaN(liczba2)==true))
		document.getElementById('wynik').innerHTML="Wartość w prawym polu nie jest liczbą";
	else if((isNaN(liczba1)==true) && (isNaN(liczba2)==true))
		document.getElementById('wynik').innerHTML="Wartość w lewym i prawym polu nie są liczbami";
	}
}

Hmm...w drugiej opcji (liczba 1 < liczba 2) nie wiem czemu dubluje mi 1..., przy wejściu 1 12;

"Jeśli mówisz, że lubisz JavaScript...to tak na prawdę go nie znasz."

Dla mnie mało to logiczne, ale ja nie siedzę w webowych technologiach.

Próbowałem zrobić to w miarę logicznie - nie dało rady, bo pętla wykonywała się, a innerHTML wyrzucany był tylko raz, wyrzucając wszystko.

komentarz 5 kwietnia 2015 przez Ursan Bywalec (2,920 p.)

Dla mnie, logicznie rozumując taki kod, powinien wyrzucić tylko ostatnią "liczba" z danej pętli, a JS wyświetla wszystkie...czy to ja jestem głupi, że tego nie widzę, czy coś tu nie jest logiczne?..

komentarz 5 kwietnia 2015 przez arkus Bywalec (2,160 p.)

Dubluje Ci jedynkę, bo na początku przypisałeś do zmiennej liczba wartość pola liczba1. Następnie w pętli do liczba dorzucasz przy pierwszym przejściu pętli wartość zmiennej i = 1. Dlatego masz 2 jedynki. (nie kopiowałem kodu, nie sprawdzałem, ale tak to widzę)

komentarz 5 kwietnia 2015 przez Ursan Bywalec (2,920 p.)

Gdy robiłem bez tego, program nic nie wypisywał. Musiałbym poczytać troszkę o innerHTML, jest dosyć dzwiny. Nawet bez liczba += i; , a liczba = i; wyrzucał wszystkie odpowiedzi, a powinien (logicznie rzecz biorąc) tylko ostatnią, jak to jest?

komentarz 5 kwietnia 2015 przez arkus Bywalec (2,160 p.)

Ogólnie innerHTML ma za zadanie podmienić kod strony, w końcu to wewnętrzny HTML. My akurat tutaj podmieniamy kod jednego diva :)

Nie wiem, jaki kod masz na myśli, jak chcesz to podeślij :D

No i tak to nie działa, jest dokładnie taki sam problem jak wyżej, z tym porównywaniem wartości :)

odpowiedź 5 kwietnia 2015 przez Apsik Użytkownik (990 p.)
edycja 5 kwietnia 2015 przez Apsik

Zerknołem na ten kod i odrazu zobaczyłem mase błędów!!!!!!!!!!!!!!!!!!!


<body>
<fieldset style="width:500px">
    <input type="text" id="pole1" value="" />
    <input type="text" id="pole2" value="" />
    <input type="submit" value="Wypisz" onclick="wypisz()"/>
    <div id="wynik"></div>
    <div id="aa"></div>
    <div id="bb"></div>
</fieldset>
<script type="text/javascript">  // znacznik <script>, a po nim znaczni <span> BRAWO!
    <span style="color:#B22222">function wypisz()
    {
        var liczba1=document.getElementById('pole1').value;
        var liczba2=document.getElementById('pole2').value;
        var napis="";
        if((isNaN(liczba1)==false) && (isNaN(liczba2)==false)) // tutaj wystrczyło zobić negacje czyli coś takiego !isNaN(liczba1)  np !true = false i !false = true
        {
            if(liczba1<=liczba2) 
            {   
                for(i=liczba1; i<=liczba2; i++)
                {
                    napis=napis+i+" "; //  napis+=i+" ";  jeden + wystarczył a robi to samo
                }
                document.getElementById('wynik').innerHTML=napis;
            }
            else if(liczba1>liczba2) // if nie potrzebny wystarczy samo else
            {
                for(i=liczba1; i>=liczba2; i--)
                {
                    napis=napis+i+" "; // powtórka!
                }
                document.getElementById('wynik').innerHTML=napis;
            }
        }
        else
        {
            if((isNaN(liczba1)==true) && (isNaN(liczba2)==false)) // wartość logiczną true nie trzeba porównywać czyli zamiast isNaN(liczba1)==true) wystarczy samo isNaN(liczba1)

                document.getElementById('wynik').innerHTML="Wartość w lewym polu nie jest liczbą";
            else if((isNaN(liczba1)==false) && (isNaN(liczba2)==true))
                document.getElementById('wynik').innerHTML="Wartość w prawym polu nie jest liczbą";
            else if((isNaN(liczba1)==true) && (isNaN(liczba2)==true))
                document.getElementById('wynik').innerHTML="Wartość w lewym i prawym polu nie są liczbami";         
        }
    }
</script></span> // a tu już dobrze O.o
</body>
 
</html>

Nie będe Ci wysyłał gotowego kodu, bo nie ma to sensu ucz się i poprawiaj sam kod ja Ci tylko znajde błędy i pokaże jak je poprawić.

komentarz 6 kwietnia 2015 przez arkus Bywalec (2,160 p.)

Każdy ma prawo do błedów :) Kolega dopiero się uczy JS. Według mnie lepiej poprawić błąd i powiedzieć dlaczego tak nie powinnno się robić zamiast pisać coś w stylu "no brawo, jak mozna to tak napisac..."

komentarz 6 kwietnia 2015 przez Apsik Użytkownik (990 p.)

Jakbyś nie zauważył, to wszystko opisałem każdy błąd jest opisany i pokazane jak trzeba coś poprawić z tego co widze przeczytałeś tylko pierwszy komentarz i nawet go nie zrozumiałeś..