Zminimalizowanie tekstu w javascript + mały problem

pytanie zadane 31 maja 2015 w JavaScript przez Zibby Początkujący (360 p.)
edycja 31 maja 2015 przez Eryk Andrzejewski

<!DOCTYPE HTML>
<html lang="pl">

<head>
    <meta charset="utf-8" />
    <title>Dodatnie/Ujemne</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        
        <style>
        body
        {
        color:#ffffff;
        font-weight:900;
        font-size:36px;
        }
        
        </style>
    <script type="text/javascript">
    
    
    function wypisz()
    {
            var x = document.getElementById("pole1").value;
            var y = document.getElementById("pole2").value;
            var z = " ";
            var xtext = 1;
            var ytext = 1;
        
        if (x>0) xtext = 1;
        else if (x<0) xtext = 1;
        else if (x==0) xtext = 1;
        else    xtext=0;
        
        if (y>0) ytext = 1;
        else if (y<0) ytext = 1;
        else if (y==0) ytext = 1;
        else ytext = 0;
        
if (xtext==0 && ytext==1) document.getElementById("wynik").innerHTML = "Nie rozpoznano liczby w lewym polu";

if (xtext==1 && ytext==0) document.getElementById("wynik").innerHTML = "Nie rozpoznano liczby w prawym polu";

if (xtext==0 && ytext==0) document.getElementById("wynik").innerHTML = "Nie rozpoznano liczby w obu polach";
    
if (xtext==1 && ytext==1)
{
        if (y>x)
        {
            for(i=x;i<=y;i++)
            {
            z=z+i+" ";
            }
            document.getElementById("wynik").innerHTML = z;
        }
            
        if (x>y)
        {
            for(i=x;i>=y;i--)
            {
            z=z+i+" ";
            }
            document.getElementById("wynik").innerHTML = z;
        }
}
    }
        </script>
        
</head>
<body bgcolor="#302010">

    <center>
        <input id="pole1" type="text">
        <input id="pole2" type="text">
        <input type="submit" value="wypisz" onclick="wypisz()">

        <div id="wynik">
        </div>
        <br><br><br><br>
        <img border="4" src="http://i60.tinypic.com/2rc1szp.png"  alt="Image and video hosting by TinyPic">
    </center>
</body>
</html>

To jest mój efekt zadania domowego z odcinka 2 o javascript Mirosława Zelenta. Niby wszystko działa jak należy ale wydaje mi się, że można to zrobić mniejszą ilością tekstu i w przyjemniejszy dla oka sposób. Wiem, że "ilu informatyków tyle rozwiązań" ale jeżeli zrobiłem coś nie tak, to proszę o jakieś przydatne porady.

Ps. Jak trochę posiedziałem przy mojej stronie i pobawiłem się skryptem (bez odświeżania strony) to zauważyłem czasami błąd, że w odpowiedzi widzę tylko liczbę z prawego pola a nie ich ciąg (załączone zdjęcie).

Z góry dzięki ;)

1 odpowiedź

odpowiedź 31 maja 2015 przez Comandeer Guru (601,590 p.)

Problem z liczbami jest spowodowany tym, że nie konwertujesz ich na… liczby ;) To, co pobierzesz z formularza, to string - a przy porównywaniu stringów brany jest pod uwagę 1. znak, nie całość. A 5 jest większe od 1, mimo że cała liczba 54 jest mniejsza od 144. Może warto zastosować odpowiednią funkcję tutaj:

var x = document.getElementById("pole1").value;
var y = document.getElementById("pole2").value;

Zastanawiam się także nad tym po co Ci zmienne xtext i ytext - równie dobrze do warunków pod nimi można było dać po prostu porównywanie zmiennych x i y - byłoby to nawet czytelniejsze. No i co jak wpiszę w jakiekolwiek pole 0?