Visualizzazione dei risultati da 1 a 3 su 3

Discussione: errori sito html-js

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2018
    Messaggi
    1

    errori sito html-js

    Ho cominciato da poco a studiare javascript, e sto facendo un pò di esercizi per esercitarmi. Uno di questi è la creazione di un form che prende in input due numeri e tramite uno script li somma, li sottrae, li divide e li moltiplica mostrando a video tramite un alert i risultati. Il problema sta nel fatto che quando lo eseguo non mostra i risultati. Potreste aiutarmi a trovare gli errori?

    Ecco il codice:

    <!DOCTYPE html>
    <html>
    <head>formHtml-js</head>
    <script language="javascript">
    var N1 = document.forms["Form"]["N1"].value;
    var N2 = document.forms["Form"]["N1"].value;
    function somma(N1, N2) {
    var A = N1 + N2;
    return A;
    }

    function sottrazione(N1, N2) {
    var S = N1 - N2;
    return S;
    }

    function moltiplicazione(N1, N2) {
    var M = N1 * N2;
    return M;
    }

    function divisione(N1, N2) {
    var D = N1 / N2;
    return D;
    }

    var A = somma(N1, N2);
    var S = sottrazione(N1, N2);
    var M = moltipplicazione(N1, N2);
    var D = divisione(N1, N2);

    alert("La somma è:" + A + "\n" + "La sottrazione:" + S + "\n" + "La moltiplicazione è:" + M + "\n" + "La divisione è:" + D);


    </script>
    <body>
    <form name="Form">
    <table border=2>
    <tr>
    <td>
    N1 <input type="text" name="N1"></input><br>
    N2 <input type="text" name="N2"></input>
    </td>
    </tr>
    <tr>
    <td>
    <input type="reset">
    </td>
    <td>
    <input type="submit" value="Submit">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>[/CODE]

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Potreste aiutarmi a trovare gli errori?
    Credimi, ne hai fatto troppi per così poco codice. Ci sono diversi errori logici, strutturali, sintattici di impaginazione ed altro ancora.
    Sebbene l'esercizio in sé richieda un livello minimo di preparazione riguardo JavaScript, noto però che ti mancano le basi anche della parte HTML. Ti suggerirei di partire magari dallo studio dei concetti base anche di HTML prima di cimentarti nello sviluppo di JavaScript.


    Primo errore logico:

    Se apri la console web (premi F12 e seleziona la scheda "Console") ed esegui la tua pagina, puoi notare che verrà segnalato un errore del genere: "TypeError: document.forms.Form is undefined"

    Questo avviene perché nel tuo codice JavaScript stai eseguendo un metodo che fa riferimento ad un elemento della pagina (document.forms["Form"]) ma tale codice è eseguito prima che l'elemento sia effettivamente creato sulla pagina.

    Per risolvere questo errore puoi spostare l'intero blocco <script> alla fine del body in modo da essere sicuro che gli elementi HTML siano stati creati e siano quindi disponibili per la manipolazione via JavaScript; oppure puoi inserire lo script (in particolare quelle specifiche azioni) dentro una funzione che andrai a richiamare al momento opportuno assicurandoti che gli elementi siano comunque presenti e disponibili nella pagina.


    Secondo errore logico:

    In un contesto del genere, dove devi eseguire un codice JavaScript (che è lato client) per eseguire dei calcoli al volo e mostrarne i risultati, non ti serve il submit. L'azione del submit infatti è quella di inviare i dati di un form ad un codice lato server che eventualmente li elabori e restituisca una qualche risposta al client con la conseguenza di ricaricare la pagina eventualmente aggiornata dei dati elaborati.

    In questo caso però non ti serve inviare nessun dato al server ma dovrai semplicemente eseguire il tuo JavaScript (quindi è tutto eseguito lato client); questo puoi farlo definendo una funzione che richiamerai, ad esempio, tramite l'evento click di un qualche pulsante. Potresti anche usare lo stesso submit ma dovrai, in tal caso, prevenirne in qualche modo l'azione di default per evitare che la pagina sia ricaricata con la conseguente perdita dei dati utilizzati nella pagina fino a quel momento.


    Altri errori di markup e validazione:

    Se provi a validare il tuo codice con un validatore (anche online, come questo), puoi notare svariati errori che sarebbe meglio correggere. Non sto qui ad elencarli tutti ma lascio verificare a te (tramite il validatore) quali pasticci hai fatto e come correggerli.


    Altri errori di distrazione:
    Qui in rosso alcuni errori nel tuo codice:

    var N2 = document.forms["Form"]["N1"].value;

    var M = moltipplicazione(N1, N2);

    A volte succede, anche ai più esperti, di sbagliare i nomi degli elementi in gioco (ho segnato gli errori in rosso), per questo bisogna fare chiaramente attenzione quando si sviluppa del codice. Spesso sarà necessario fare dei debug e per questo può essere utile l'uso della console web del proprio browser e l'uso di alcune funzioni disponibili in JavaScript, come ad esempio console.log(), che permette di mostrare degli output nella console durante l'esecuzione dello script.


    Errori di impaginazione, altri ed eventuali:

    Nella tua tabella hai definito due TR con differenti quantità di TD, questo è un errore
    Ma, a parte questo, l'uso delle tabelle per definire il layout dei contenuti (come in questo caso), e non per riportare dei dati tabellari, è una cattiva pratica che al giorno d'oggi è bene evitare. In questo particolare caso puoi usare altri elementi HTML più appropriati ed eventuali regole CSS per impaginare opportunamente il tutto.

    Ci sono anche altri errori ma per il momento mi fermo qui, penso di averti indicato sufficienti argomenti da approfondire.

    Se può esserti d'aiuto ti posto una possibile soluzione del tuo codice corretto e rielaborato (chiaramente si può sviluppare in altri mille modi):
    codice:
    <!DOCTYPE HTML>
    <html>
       <head>
          <title>formHtml-js</title>
          <meta charset="utf-8">
          <style>
             fieldset {
                display: inline-block;
                text-align: center;
             }
             label{
                display: block;
                margin: 4px;
             }
          </style>
       </head>
       <body>
          
          <form name="form">
             <fieldset>
             
                <legend>Inserire due valori numerici:</legend>
                
                <label>N1: <input name="n1"></label>
                <label>N2: <input name="n2"></label>
                
                <input type="reset" value="Ripulisci campi">
                <input id="esegui" type="button" value="Esegui operazioni">
             
             </fieldset>
          </form>
          
          <script>
             
             function somma(N1, N2) {
                var A = +N1 + +N2;
                return A;
             }
             
             function sottrazione(N1, N2) {
                var S = N1 - N2;
                return S;
             }
             
             function moltiplicazione(N1, N2) {
                var M = N1 * N2;
                return M;
             }
             
             function divisione(N1, N2) {
                var D = N1 / N2;
                return D;
             }
             
             function eseguiOperazioni(){
                var N1 = form.n1.value;
                var N2 = form.n2.value;
                
                var A = somma(N1, N2);
                var S = sottrazione(N1, N2);
                var M = moltiplicazione(N1, N2);
                var D = divisione(N1, N2);
                
                alert("La somma è: " + A + "\n" + "La sottrazione: " + S + "\n" + "La moltiplicazione è: " + M + "\n" + "La divisione è: " + D);
             }
             
             form.esegui.onclick = eseguiOperazioni;
             
          </script>
       </body>
    </html>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,505
    ciao alias26
    leggi il regolamento
    grazie
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.