Sprawdzenie czy napis jest liczbą

0

Jestem początkująca.
Proszę o pomoc - jakieś podpowiedzi, nakierowanie
Szukałam i nie znalazłam.

Jak mogę sprawdzić, czy napis wprowadzony przez użytkownika jest liczbą? Użytkownik może wprowadzać wszystkie znaki dostępne na klawiaturze. Mają być użyte warunki, const i getElementById.

Warunki:
Jeśli napis ma same liczby, to napis jest liczbą.
Jeśli napis ma same litery, to napis nie jest liczbą.
Jeśli napis ma liczby i jakiś znak to napis nie jest liczbą.
Jeśli napis ma litery i jakiś znak to napis nie jest liczbą.
Jeśli napis ma litery i liczby to napis nie jest liczbą.

Nie wiem, jak to zrobić, bo liczb i znaków jest bardzo dużo,

0

const isNumber = !isNaN(number)

Ale jeszcze musisz obsłużyć pusty string, string ze spacją, pusty array itd. Sprawdź co dał @lion137

0

szafran98 napisał(a):

const isNumber = !isNaN(number)

Jak wpisze 1, -1, 0,5, -0,5 to wyświetla mi, że to liczba i to jest dobrze.
Jak wpisze A, #, zostawie puste pole to wyświetla 0 jest liczbą.
Gdzie mam błąd?

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="typ_napisu.js"></script>
</head>

<body>
    <form id="oblicz" action="" method="post" autocomplete="off">
        <div>
            <h3>Sprawdź czy napis jest liczbą</h3>
            <p><input type="number" id="n"></p>
            <span id="nl"></span><br><br>
            <input type="button" value="Sprawdz" onclick="czyliczba()">
            <input type="reset" value="RESETUJ" onclick="resetuj()">
        </div>
    </form>

</body>

</html>

JavaScript

function czyliczba() {
    const n = document.getElementById('n').value;
    const nl = isNaN(parseFloat('n'));
    
    if(isNaN(n)){
        document.getElementById('nl').innerHTML = + n + " nie jest liczbą. <br/>";
    }
    else{
        document.getElementById('nl').innerHTML = + n + " jest liczbą. <br/>";
    }

    return false;
}

0

Podajesz jako typ input: number, co uniemożliwia wpisanie innych znaków. U mnie działa: https://codepen.io/overcq/pen/ZErPyPy

0

Wszystko działa tylko jak nic nie wpisze to wyświetla 0 jest liczbą zamiast to nie jest liczba lub wprowadź napis.

Wystarczy sprawdzać tekst przed funkcją isNaN na obecność pustego ciągu, tak jak pisał przedmówca. Możesz użyć funkcji trim.

0

overcq napisał(a):

Wszystko działa tylko jak nic nie wpisze to wyświetla 0 jest liczbą zamiast to nie jest liczba lub wprowadź napis.

Wystarczy sprawdzać tekst przed funkcją isNaN na obecność pustego ciągu, tak jak pisał przedmówca. Możesz użyć funkcji trim.

Zrobiłam działa,

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="typ_napisu.js"></script>
</head>

<body>
    <form id="oblicz" action="" method="post" autocomplete="off">
        <div>
            <h3>Sprawdź czy napis jest liczbą</h3>
            <p><input type="text" id="n"></p>
            <span id="nl"></span><br><br>
            <input type="button" value="Sprawdz" onclick="czyliczba()">
            <input type="reset" value="RESETUJ" onclick="resetuj()">
        </div>
    </form>

</body>

</html>

function czyliczba() {
    const n = document.getElementById('n').value;
    const nl = document.getElementById('nl').value;
    
    if(isNaN(n)){
        document.getElementById('nl').innerHTML = + n + " nie jest liczbą. <br/>";
    }
    else if(n===''){
        document.getElementById('nl').innerHTML = + n + " Nie wprowadziłaś/eś napisu. Wprowadź napis. <br/>";
    }

    else{
        document.getElementById('nl').innerHTML = + n + " jest liczbą. <br/>";
    }

    return false;
}

function resetuj () {

    document.getElementById('nl').innerHTML = '';

}

0

Jak wprowadzę literę np. A lub znak np. # to wynik pokazuje Nan to nie jest liczba, a powinno pokazać się A nie jest liczbą lub # nie jest liczbą. Jak to zrobić? Proszę o podpowiedź. Przy 1, -1, 0.5, -0.5 nie ma takiego problemu.

Poniższe kody pokazują nadal NaN.
I sposób

function czyliczba() {
    const n = document.getElementById('n').value;
    const nl = document.getElementById('nl').value;
    document.getElementById('nl').innerHTML = +n;
    
    if(isNaN(n)){
        document.getElementById('nl').innerHTML = + n + " nie jest liczbą. <br/>";
    }
    else if(n===''){
        document.getElementById('nl').innerHTML = + n + " Nie wprowadziłaś/eś napisu. Wprowadź napis. <br/>";
    }

    else{
        document.getElementById('nl').innerHTML = + n + " jest liczbą. <br/>";
    }

    return false;
}

II sposób

function czyliczba() {
    const n = document.getElementById('n').value;
    const nl = document.getElementById('nl').value;
    document.getElementById('nl').innerHTML = +nl;
    
    if(isNaN(n)){
        document.getElementById('nl').innerHTML = + n + " nie jest liczbą. <br/>";
    }
    else if(n===''){
        document.getElementById('nl').innerHTML = + n + " Nie wprowadziłaś/eś napisu. Wprowadź napis. <br/>";
    }

    else{
        document.getElementById('nl').innerHTML = + n + " jest liczbą. <br/>";
    }

    return false;
}

1

Marta Długa napisał(a):

Jak wprowadzę literę np. A lub znak np. # to wynik pokazuje Nan to nie jest liczba, a powinno pokazać się A nie jest liczbą lub # nie jest liczbą.

Ponieważ używasz operatora + jako +n, który zamienia na liczbę.
Poza tym najpierw lepiej sprawdzać, czy ciąg jest pusty (funkcją trim).
I w dodatku nie eskejpujesz znaków specjalnych HTML, które mogą się znaleźć w n.

1

document.getElementById('nl').innerHTML = + n + " nie jest liczbą. <br/>";

bo plus nie w tym miejscu. To, co napisałaś, to w zasadzie przypisanie, gdzie po lewej stronie znaku = masz document.getElementById('nl').innerHTML, a po prawej stronie + n + " nie jest liczbą. "

A + przed zmienną daje taki efekt, że próbuje przekonwertować tę zmienną na liczbę. Więc jeśli użytkownik wpisał "kotek", to + "kotek" będzie dawało w wyniku NaN.

Natomiast przypuszczam, że to, co naprawdę chciałaś zrobić, to użyć +=, czyli "dodaj do istniejącego":

document.getElementById('nl').innerHTML += n + " nie jest liczbą. <br/>"

BTW lepiej używać w takich sytuacjach np. innerText zamiast innerHTML (bo jeśli użytkownik wpisze kod HTML np. foo to przy używaniu innerHTML ten HTML znajdzie się bezpośrednio w drzewie dokumentu, a zwykle nie chcemy, żeby użytkownik miał prawo ingerować bezpośrednio w HTML).

0

LukeJL napisał(a):

Natomiast przypuszczam, że to, co naprawdę chciałaś zrobić, to użyć +=, czyli "dodaj do istniejącego":
document.getElementById('nl').innerHTML += n + " nie jest liczbą. "

Ten sposób nadal pokazuje NaN.

BTW lepiej używać w takich sytuacjach np. innerText zamiast innerHTML (bo jeśli użytkownik wpisze kod HTML np. foo to przy używaniu innerHTML ten HTML znajdzie się bezpośrednio w drzewie dokumentu, a zwykle nie chcemy, żeby użytkownik miał prawo ingerować bezpośrednio w HTML).

Tylko jak do tego dodać html np.

<br>

Jak dodam jak poniżej w kodzie to wyświetla w wyniku

<br>

W else pokazuje błąd.

function czyliczba() {
    const n = document.getElementById('n').value;
    const nl = document.getElementById('nl').value;
    document.getElementById('nl').innerText = n;
    
    if(isNaN(n)){
        document.getElementById('nl').innerText = n + " nie jest liczbą." + "<br>";
    }
    else if(n===''){
        document.getElementById('nl').innerText = n + " Nie wprowadziłaś/eś napisu. Wprowadź napis." + '<br>';
    }

    else{
        document.getElementById('nl').innerText = n + " jest liczbą." + <br>;
    }

    return false;
}

0

overcq napisał(a):

Poza tym najpierw lepiej sprawdzać, czy ciąg jest pusty (funkcją trim).

Jeszcze nie uczyłam się o tej funkcji. Możesz napisać jak powinnam użyć tej funkcji i czy to jedyny sposób, żeby najpierw sprawdzić czy ciąg jest pusty?

I w dodatku nie eskejpujesz znaków specjalnych HTML, które mogą się znaleźć w n.

Nierozumiem

0

Tylko jak do tego dodać html np.

function czyliczba() {
    const n_str = document.getElementById( "n" ).value;
    let out = n_str;
    if( n_str.trim() === "" )
        out += "Nie wprowadziłaś/eś napisu. Wprowadź napis.";
    else if( isNaN( n_str ))
        out += " nie jest liczbą.";
    else
        out += " jest liczbą.";
    const nl = document.getElementById( "nl" );
    const br = document.createElement( "br" )
    nl.innerText = out;
    nl.appendChild(br);
    return false;
}

Poza tym najpierw lepiej sprawdzać, czy ciąg jest pusty (funkcją trim).

Jeszcze nie uczyłam się o tej funkcji. Możesz napisać jak powinnam użyć tej funkcji i czy to jedyny sposób, żeby najpierw sprawdzić czy ciąg jest pusty?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
Tak można sprawdzić, czy ciąg zawiera tylko spacje.

I w dodatku nie eskejpujesz znaków specjalnych HTML, które mogą się znaleźć w n.

Nierozumiem

Jeśli użyjesz innerText, jak w powyższym przykładzie, to eskejpowanie jest niepotrzebne.

0

Jak wstawiać html jak mam w kodzie innerText? Dodaje celowo, żeby wiedzieć na przyszłość, jak wstawiać html np.
jak mam w kodzie innerText. W kodzie br ma zostać, ale

ma się nie wyświetlać w wyniku.
Przykład

document.getElementById('nl').innerText= n + " nie jest liczbą.'<br>'" ;  // Wyświetla nie jest liczbą.<br>, a powinno wyświetlić nie jest liczbą

Wyświetla

Ma wyświetlić jak niżej.

0

Jak wstawiać html jak mam w kodzie innerText? Dodaje celowo, żeby wiedzieć na przyszłość, jak wstawiać html np.
jak mam w kodzie innerText. W kodzie br ma zostać, ale ma się nie wyświetlać w wyniku.

Nie da się wstawić kodu HTML przy użyciu innerText.
Można wstawić przy użyciu innerHTML, ale wtedy trzeba zamienić (wyeskejpować) wszystkie znaki z tekstu, które w HTML mają szczególne znaczenie, tzn. & zamienić na &, < zamienić na < i – zależnie od lokalizacji tekstu – " zamienić na ".
W podanym przeze mnie w poprzednim poście kodzie jest najpierw dodawany tekst, a następnie do tego samego elementu na koniec jest dodawany utworzony znacznik  .

Sprawdzenie czy napis jest liczbą

szafran98 napisał(a):

overcq napisał(a):

Marta Długa napisał(a):

LukeJL napisał(a):

overcq napisał(a):

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami