Javascript Nessun risultato funzione javascript

Stato
Discussione chiusa ad ulteriori risposte.
Ordina per data Ordina commenti per reazioni
A

alias26

Utente Bronze
31 Agosto 2016
40
19
1
45
Ultima modifica da un moderatore:
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:
HTML: 
<!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>
 
Un bel pó di errori, in linea 30 dovresti sostituire "moltipplicazione" con "moltiplicazione", inoltre inserisci tutto il tuo codice all'interno di un evento "onload" o simili (a questo proposito ti suggerisco di documentarti in rete), attenzione ai "copia-incolla"... ti hanno portato a duplicare lo stesso valore per le due variabili N1 e N2.

Anche l'HTML puó essere migliorato, ma ho voluto modificare il codice e adattarlo al tuo HTML per evitare di perdere il focus su Javascript.

Javascript ti dará grandi soddisfazioni una volta padroneggiato, in bocca al lupo!

Protip: Indenta il codice.

Codice: 
// Non indentato dal momento in cui è solo un copia-incolla. :3

onload = function(){
document.querySelector('input[type=submit]').onclick = function(e){
e.preventDefault();
var N1 = document.forms["Form"]["N1"].value - 0;
var N2 = document.forms["Form"]["N2"].value - 0;
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 = moltiplicazione(N1, N2);
var D = divisione(N1, N2);

alert("La somma è:" + A + "\n" + "La sottrazione:" + S + "\n" + "La moltiplicazione è:" + M + "\n" + "La divisione è:" + D);
}}
 
alias26 ha detto:
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:
HTML: 
<!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>
Clicca per espandere...
Innanzitutto ti consiglio di posizionare i tuoi elementi script prima della chiusura del tag body, poichè a livello di prestazioni di caricamento della pagina, fai un passo avanti verso la logica di contenuti above the fold(la parte di pagina che vedi appena caricata dal browser), anche se dovresti approfondire un discorso di caricamento differenziato per avere risultati maggiori, ma non mi sembra il momento adatto ora.
Inoltre, il codice Javascript che tu hai scritto, viene eseguito prima che la pagina sia effettivamente caricata e di conseguenza non riesce a recuperare i valori degli input che inserisci successivamente.
Per far ciò, dovresti intercettare l'evento di invio del form ed annullarne i callback di default, per poi eseguire il tuo codice.
Un esempio è questo:
HTML: 
<form name="form" onsubmit="event.preventDefault();InviaForm();">
    <input type="number" id="n-1" />
    <input type="submit" value="Invia" />
</form>
<script>
function InviaForm () {
    // Tuo codice ...
}
</script>
Quindi, è proprio dentro la funzione InviaForm che dovresti recuperare i valori dei tuoi input. Resta un problema... che operazione aritmetica eseguire?
Personalmente inserirei un gruppo di RadioButton a scelta singola, dove l'utente può selezionare la tipologia di calcolo da applicare sul submit del form.
Spero di esserti stato d'aiuto :)
 
</Maz> ha detto:
Un bel pó di errori, in linea 30 dovresti sostituire "moltipplicazione" con "moltiplicazione", inoltre inserisci tutto il tuo codice all'interno di un evento "onload" o simili (a questo proposito ti suggerisco di documentarti in rete), attenzione ai "copia-incolla"... ti hanno portato a duplicare lo stesso valore per le due variabili N1 e N2.

Anche l'HTML puó essere migliorato, ma ho voluto modificare il codice e adattarlo al tuo HTML per evitare di perdere il focus su Javascript.

Javascript ti dará grandi soddisfazioni una volta padroneggiato, in bocca al lupo!

Protip: Indenta il codice.

Codice: 
// Non indentato dal momento in cui è solo un copia-incolla. :3

onload = function(){
document.querySelector('input[type=submit]').onclick = function(e){
e.preventDefault();
var N1 = document.forms["Form"]["N1"].value - 0;
var N2 = document.forms["Form"]["N2"].value - 0;
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 = moltiplicazione(N1, N2);
var D = divisione(N1, N2);

alert("La somma è:" + A + "\n" + "La sottrazione:" + S + "\n" + "La moltiplicazione è:" + M + "\n" + "La divisione è:" + D);
}}
Clicca per espandere...
Attenzione che anche il tuo codice eseguirà a vuoto, poichè eseguito sull'onload (che secondo la vostra logica si segue sul submit del form) ed i valori del form precedente non vengono recuperati!
 
Dazorn ha detto:
Attenzione che anche il tuo codice eseguirà a vuoto, poichè eseguito sull'onload (che secondo la vostra logica si segue sul submit del form) ed i valori del form precedente non vengono recuperati!
Clicca per espandere...

In realtá il codice è stato testato e funziona perfettamente: https://code.sololearn.com/WU5Ajz6Yd2Vx/?ref=app

L'evento 'onload' è stato inserito per registrare un evento "click" ad un elemento DOM, i valori vengono recuperati al click di tale elemento per essere elaborati.
 
</Maz> ha detto:
In realtá il codice è stato testato e funziona perfettamente: https://code.sololearn.com/WU5Ajz6Yd2Vx/?ref=app

L'evento 'onload' è stato inserito per registrare un evento "click" ad un elemento DOM, i valori vengono recuperati al click di tale elemento per essere elaborati.
Clicca per espandere...
Oh scusa,
non avevo visto che assegnavi l'eventListener all'input :)
Comunque esistono parecche vie per risolvere questo problema, ne abbiamo spiegate due differenti ;)
 
Stato
Discussione chiusa ad ulteriori risposte.

DISCUSSIONI SIMILI

D
Guida Calcolare la lunghezza in bytes di una funzione in C/C++ e difficoltà varie
  • 5
  • 627
5
627
C / C++
JunkCoder
M
Domanda python web scraping
  • 2
  • 507
2
507
Python
DidyMond
0
Guida Android Application Penetration Testing - Concetti e Basi
  • Release
  • 3
  • 3K
3
3K
Pentesting e Ethical Hacking Guide e Tools
0xbro
Top Bottom
Indietro