Casella di testo

di
tonyven1
il
3 risposte
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69

Casella di testo

Ciao. Continuando gli esercizi di javascript ho fatto un listato dove inserendo un numero arbitrario in una casella di testo ,viene stampato un conteggio fino ad arrivare a zero. Il listato funziona però mi decrementa anche il valore dentro la text box che vorrei evitare. Ogni volta che si decrementa il valore visualizzato in una div si decrementa anche il valore della text box. Dove sbaglio?

<!DOCTYPE html>
<html>

<body>
    Input: <input type="text" id="num">
    <input type="button" onclick="calcola()" value="Calcola"><br>
    Output:
    <div id="vis" style="margin-left: 40px;"></div>
    <script type="text/javascript">

        num = document.getElementById('num');
        
        function calcola() {
            count = num.value--;
            let time = 0;

            if (count == 0) {
                clearTimeout(time);
            } else {
                count--;
                vis.innerHTML += count + "<br>";
                time = setTimeout(calcola, 1000);
            }
        }  
    </script>
</body>

</html>

3 Risposte

  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Casella di testo

    Ricorda che è di separare la logica dalla view, dunque l'onclick() nell'html è una “bad practice”, cosi come utilizzare :

    type="text/javascript"

    nello script, in html5 questo è superfluo visto che dovrebbe essere il valore di default.

    Questo è un esempio di come potresti implementare il tuo codice. Ciao

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    Input: <input id="num" type="text">
    <input id="calcola" type="button" value="calcola"><br>
    Output:
    <div id="vis" style="margin-left: 40px;"></div>
    <script>

        const num = document.getElementById('num')
        const calcolaBtn = document.getElementById('calcola')
        const view = document.getElementById('vis')
        let tempNum = null
        let time = null

        calcolaBtn.addEventListener('click', calcola)
        num.addEventListener('change', checkTime)

        function checkTime() {
            tempNum = +num.value
            clearTimeout(time)
        }

        function calcola() {
            view.textContent = tempNum
            if (tempNum > 0 && Number.isInteger(tempNum)) {
                tempNum--
                time = setTimeout(calcola, 1000)
            }
        }

    </script>

</body>

</html>
  • T
    tonyven1
    Utente Attivo
    Iscritto da
    gen, 2023
    Messaggi:
    69

    Re: Casella di testo

    Perfetto.Grazie mille. Avevo bisogno di una schiarita in tal senso. Avrei da chiedere cosa fa questa riga:

       function checkTime() {
            tempNum = +num.value  // cosa fa?
            clearTimeout(time)
        }
  • A
    alfredo.centinaro
    Pochi posts
    Iscritto da
    apr, 2022
    Messaggi:
    21

    Re: Casella di testo

    24/03/2023 - tonyven1 ha scritto:

    count = num.value--;

    direi che decisamente è qui l'errore. Stai agendo direttamente sul valore dell'oggetto dom

    Prova a fare una copia:

    let count = num.value;
count--;
Devi accedere o registrarti per scrivere nel forum
3 risposte