Czy wartość inputa jest równa 10?

pytanie zadane 1 maja 2018 w JavaScript przez Zackerrr Początkujący (450 p.)
edycja 1 maja 2018 przez Comandeer

Witam,

Chciałem zrobić taki "mini-projekt". Polega na tym, że na "input" piszę dowolną cyfrę (np. 11, 20,10000, itd.), i klikam na przycisk, to funkcja podpowie, czy jest równe 10, czy większe lub mniejsze od 10. Chciałem sam zrobić, wyobrazić sobie, jak to zrobić, ale nie daję sobie radę :(

Oto kody :

<!doctype html>
<html>
<head>
    
</head>
<body>
    <p>Test - Test</p>
    
    <button onclick="wynik()">Wynik</button>
    <input type="text" id="result">
    <script>
    
        function wynik(){
            var x = 1;
            if (x == 10){
                alert("Jest równe 10");
            } else if (x < 10){
                alert("Jest mniejsze od 10");
            } else if (x > 10){
                alert("Jest większe od 10");
            } else {
                alert("Error");
            }
        }
        
    </script>
</body>
</html>

Pomocy.. ://

1	komentarz 1 maja 2018 przez Comandeer Guru (601,550 p.) Na przyszłość proszę sensowniej nazywać tematy.

2 odpowiedzi

odpowiedź 1 maja 2018 przez Mariusz08 Maniak (62,300 p.)

Do zmiennej x musisz pobrać wartość inputa, a nie statycznie ustawiać zmienną.

https://developer.mozilla.org/pl/docs/DOM

komentarz 1 maja 2018 przez pablop76 VIP (123,180 p.)

value

i można jako type ustawić number

komentarz 1 maja 2018 przez Comandeer Guru (601,550 p.)

Co totalnie nic nie zmieni, bo JS i tak wyciągnie string.

komentarz 1 maja 2018 przez pablop76 VIP (123,180 p.)
edycja 1 maja 2018 przez pablop76

Zmiana będzie. Przeglądarka oznaczy input jeżeli wpiszemy wartość inną niż liczba, lub cyfra.

Dodatkowo należy przekonwertować na inta parseInt() oraz sprawdzić czy konwersja się powiodła isNaN()

odpowiedź 1 maja 2018 przez Sejdi Początkujący (460 p.)
edycja 1 maja 2018 przez Sejdi

<!doctype html>
<html>
<head>
     <script>
     
        function wynik(){
            var x = document.getElementById('result').value;
            if (x == 10){
                alert("Jest równe 10");
            } else if (x < 10){
                alert("Jest mniejsze od 10");
            } else if (x > 10){
                alert("Jest większe od 10");
            } else {
                alert("Error");
            }
        }
         
    </script>
</head>
<body>
    <p>Test - Test</p>
     
    <button onclick="wynik()">Wynik</button>
    <input type="number" id="result">
  
</body>
</html>

komentarz 1 maja 2018 przez Comandeer Guru (601,550 p.)

funkcja wynik() musi być wyżej w kodzie niż jej wywołanie, tak aby przeglądarka wiedziała że taka funkcja w ogóle istnieje.

Bzdura.

Dodatkowo [onclick] nie powinno się używać, bo to przestarzała technika, która zaburza podział warstw aplikacji i równocześnie obniża bezpieczeństwo strony. Powinno się zawsze stosować addEventListener.

komentarz 1 maja 2018 przez pablop76 VIP (123,180 p.)

Tak. Ale w związku z tym, że w js nie deklarujemy typu zmiennych zachodzi automatyczna konwersja. Musisz to uwzglednić.

typy danych

komentarz 1 maja 2018 przez Comandeer Guru (601,550 p.)

Tak po prawdzie jest zawsze zwracany string nie dlatego, że tak działa JS, ale dlatego, że tak zaprojektowano to DOM API i własność value została określona jako typu DOMString. Co ciekawe istnieją też własności valueAsNumber i valueAsDate, które działają dla odpowiednich typów pól input.

komentarz 1 maja 2018 przez pablop76 VIP (123,180 p.)

Jeżeli zmienna jest liczba lub cyfra to typeof() zwraca number.

komentarz 1 maja 2018 przez Comandeer Guru (601,550 p.)

@pablo76, no tak, ale totalnie przecież nie o tym piszę. Tłumaczę, dlaczego własność value zwraca zawsze string i dlaczego nie ma to nic wspólnego z mechanizmami JS.