Konwersja wartości na liczbę

Question

Witam wszystkich Użytkowników! Problem dotyczy zadania 2 z drugiej lekcji Javascript z pasja-informatyki.pl. Czy ktoś z Was wie może, dlaczego nie działają mi 3 ostanie else ify w funkcji wypisz? Wpisuje w pole1 np. "aaa", w pole2 jakąś liczbę, a w divie "wynik" wyświetla mi napis "aaa". Analogicznie dla pozostałych dwóch przypadków. Czy przyczyną może być problem z konwersją wartości z pola1 oraz pola2 na liczbę? Pozdrawiam.\

HTML

        <input type="text" id="pole1"/>
        <input type="text" id="pole2"/>
        <input type="submit" value="Pokaż"  onclick="wypisz()"/>
        
        <div id="wynik"> </div>

JavaScript
 

function wypisz()
            {
            
                var liczba1 = document.getElementById("pole1").value;
                var liczba2 = document.getElementById("pole2").value;
                var napis = "";
                
                if(liczba1<liczba2)
                {                
                    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(parseInt(liczba1)) && typeof(liczba2)=="number")
                {
                    napis = napis + "W lewym polu nie podano liczby";
                }
                
                else if (isNaN(parseInt(liczba2)) && typeof(liczba1)=="number")
                {
                    napis = napis + "W prawym polu nie podano liczby";
                }
                
                else if (isNan(parseInt(liczba1)) && isNaN(parseInt(liczba2)))                
                {
                    napis = napis + "Nie podano liczb";
                }
                document.getElementById("wynik").innerHTML = napis;
            }

Answer 1

typeof(liczba2)=="number"

Ten warunek nigdy nie będzie spełniony, bo nie zapisujesz nigdzie wyniku przepuszczenia liczba2 przez parseInt do zmiennej. Osobiście od razu bym to, co wyciągnę z formularza, przekonwertował na liczby.

BTW w ostatnim ifie masz błąd – isNan zamiast isNaN. Inna rzecz, że obecnie warto stosować Number.isNaN (o ile oczywiście nie musisz wspierać starych IE).

Comments

Dziękuję za cenne uwagi i odpowiedź. Zastosowanie rzutowania na liczbę od razu przy odczycie prawie pomogło, ale jak wpisuję w obydwu polach coś innego niż liczby, to traktuje, to jak przypadek 3, czyli, że tylko w lewym polu nie ma liczby. Literówkę w "isNaN" poprawiłem. Może jakoś te warunki źle rozpisałem? Pozdrawiam.

PS. Wrzucam już tylko samą funkcję.

 

function wypisz()
{
            
                var liczba1 = parseInt(document.getElementById("pole1").value);
                var liczba2 = parseInt(document.getElementById("pole2").value);
                var napis = "";
                
                if(liczba1<liczba2)
                {                
                    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.isNaN(liczba1) && typeof(liczba2)=="number")
                {
                    napis = napis + "W lewym polu nie podano liczby";
                }
                
                else if (Number.isNaN(liczba2) && typeof(liczba1)=="number")
                {
                    napis = napis + "W prawym polu nie podano liczby";
                }
                
                else if (Number.isNaN(liczba1) && Number.isNaN(liczba2))                
                {
                    napis = napis + "Nie podano liczb";
                }
                document.getElementById("wynik").innerHTML = napis;
}

 

---

Wg mnie dzieje się tak dlatego, że gdy wpiszesz cokolwiek innego niż liczbę, to zmienna liczba2 po przejściu przez parseInt() zwraca NaN. Natomiast w trzecim warunku masz:

else if(Number.isNaN(liczba1) && typeof(liczba2)=="number")

Pierwszy warunek się sprawdzi, bo liczba1 jest typu NaN. Drugi warunek również się sprawdzi, bo:

 typeof NaN === 'number' // true;

Specyfikacja ECMA traktuje NaN jako liczbę:

http://ecma262-5.com/ELS5_Section_4.htm#Section_4.3.23

Number value that is a IEEE 754 "Not-a-Number" value.

Na MDN również potwierdza się, że typeof NaN === 'number';

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

typeof NaN === 'number'; // Despite being "Not-A-Number"

---

Przesuń ostatni warunek (gdy obie zmienne muszą być typu NaN) na miejsce aktualnie trzeciego i powinno działać.

Do tego polecam stosować potrójny operator porównania: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators