funzione onclick non va

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
Ciao a tutti:),
sto creando un sito per studenti delle scuole medie e superiori dove si possono fare operazioni di vario tipo, ora mi sto concentrando sulle formule e così ho creato questo piccolo form e questo script per far calcolare la formula Fe=h/L*P e le relative inverse, però non riesco a farla funzionare e non capisco dove sbaglio :confused:,
il codice html del form è il seguente:

HTML:
<!DOCTYPE html>
<html>
<head>
<title>
piano inclinato
</title>
<style>

.risultato{
    border: solid, black, 3px;

}

</style>
</head>
<body>
<form>
<p>inserisci dati</p>
<input type="text" placeholder="Fe" id="forzaEquilibrante" name="forzaEquilibrante"/><br>
<input type="text" placeholder="P" id="peso" name="peso"/><br>
<input type="text" placeholder="h" id="altezza" name="altezza"/><br>
<input type="text" placeholder="L" id="lunghezza" name="lunghezza"/><br>
<p>scegli incognita</p>
<input type="radio" id="incognita" name="incognita" value="Fe" required/><label for="Fe">Fe</label>
<input type="radio" id="incognita" name="incognita" value="P" required/><label for="P">P</label>
<input type="radio" id="incognita" name="incognita" value="h" required/><label for="h">h</label>
<input type="radio" id="incognita" name="incognita" value="L" required/><label for="L">L</label>
<br>
<br>
<p>assicurati di inserire i valori in Newton o metri</p>
<br>
<br>
<input type="submit" value="calcola" onsubmit="calcolo();"/><br>
</form>
<br>
<br>
<p class="risultato"id="risultato">risultato:</p>

</body>
</html>
mentre questo è lo script:

JavaScript:
<script>
var forzaEquilibrante = document.getElementById("forzaEquilibrante").value;
var peso = document.getElementById("peso").value;
var altezza = document.getElementById("altezza").value;
var lunghezza = document.getElementById("lunghezza").value;
var incognita = document.getElementById("incognita").value;

function calcolo(){
    if(incognita === "Fe"){
        document.getElementById("risultato").innerHTML = (altezza / lunghezza) * peso + "N";
    }
    else if(incognita === "P"){
        document.getElementById("risultato").innerHTML = forzaEquilibrante /(altezza / lunghezza) + "N";
    }
    else if(incognita === "h"){
        document.getElementById("risultato").innerHTML = (forzaEquilibrante / peso) * lunghezzza + "m";
    }
    else if(incognita === "L"){
        document.getElementById("risultato").innerHTML = forzaEquilibrante / (peso * altezza) + "m";
    }
    
}

calcolo()
</script>
sapreste aiutari? è probabile che abbia commesso vari errori perche sono abbastanza alle prime armi con la programmazione.
 

Tommy03

Utente Attivo
6 Giu 2018
440
45
28
17
Bassano del Grappa (VI)
Ad esempio inserisci una riga del genere prima dell'inizio della funzione calcolo() in modo da verificare che i dati siano stati passati correttamente:
HTML:
alert(peso + "," + altezza + "," + lunghezza + "," + incognita);
Se è tutto ok e i dati vengono presi correttamente, allora prova successivamente a scrivere
HTML:
if(incognita === "Fe"){
        var risultato = (altezza / lunghezza) * peso + "N";
alert(risultato);
    }
...
In questo modo controlli cosa succede

P.s. sono un dilettante e non ne conosco la differenza, ma io uso == invece di === di solito
 

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
Ad esempio inserisci una riga del genere prima dell'inizio della funzione calcolo() in modo da verificare che i dati siano stati passati correttamente:
HTML:
alert(peso + "," + altezza + "," + lunghezza + "," + incognita);
Se è tutto ok e i dati vengono presi correttamente, allora prova successivamente a scrivere
HTML:
if(incognita === "Fe"){
        var risultato = (altezza / lunghezza) * peso + "N";
alert(risultato);
    }
...
In questo modo controlli cosa succede

P.s. sono un dilettante e non ne conosco la differenza, ma io uso == invece di === di solito
ok grazie mille del suggerimento, io scrivo === perché sto imparando a programmare on line e ho visto che === è molto usato
 

marino51

Utente Attivo
28 Feb 2013
2.912
162
63
Lombardia
se non sbaglio recuperi i valori al caricamento della pagina
ed al momento del calcolo sono inconsistenti
dovresti recuperarli all'interno del calcolo
 

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
quindi intendi dire che dovrei inserire le variabili nella funzione?

così potrebbe andare?

JavaScript:
<script>
function calcolo(){

var incognita = document.getElementById("incognita").value;
var forzaEquilibrante = document.getElementById("forzaEquilibrante").value;
var peso = document.getElementById("peso").value;
var altezza = document.getElementById("altezza").value;
var lunghezza = document.getElementById("lunghezza").value;


    if(incognita === "Fe"){
        document.getElementById("risultato").innerHTML = ((altezza / lunghezza) * peso + "N");
    }
    else if(incognita === "P"){
        document.getElementById("risultato").innerHTML = forzaEquilibrante /(altezza / lunghezza) + "N";
    }
    else if(incognita === "h"){
        document.getElementById("risultato").innerHTML = (forzaEquilibrante / peso) * lunghezzza + "m";
    }
    else if(incognita === "L"){
        document.getElementById("risultato").innerHTML = forzaEquilibrante / (peso * altezza) + "m";
    }
    
}

</script>
 
Ultima modifica:

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
Grazie 1000 sono riuscito a farlo funzionare !!!!!
di seguito posto il codice corretto e completo
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
piano inclinato
</title>
<style>

.risultato{
    border: solid, black, 3px;
}   
    
</style>
</head>
<body>
<form id="form1" class="form1">
<p>scegli incognita</p>
<input type="radio" id="incognita" name="incognita" value="Fe" required/><label for="Fe">Fe</label>
<input type="radio" id="incognita" name="incognita" value="P" required/><label for="P">P</label>
<input type="radio" id="incognita" name="incognita" value="h" required/><label for="h">h</label>
<input type="radio" id="incognita" name="incognita" value="L" required/><label for="L">L</label>
<br>
<br>
<input type="button" value="procedi" id="button1" onclick="input();"/>
<br>
</form>
<form id="form2" class="form2" style="display: none;">
<br>
<p>inserisci dati</p>
<input type="text" placeholder="Fe" id="forzaEquilibrante" name="forzaEquilibrante" required/><br>
<input type="text" placeholder="P" id="peso" name="peso" required/><br>
<input type="text" placeholder="h" id="altezza" name="altezza" required/><br>
<input type="text" placeholder="L" id="lunghezza" name="lunghezza" required/><br>
<br>
<br>
<p>assicurati di inserire i valori in Newton o metri</p>
<br>
<br>
<input type="button" value="calcola" onclick="calcolo();"/><br>
</form>
<br>
<br>
<p class="risultato"id="risultato" style="display: none;">risultato:</p>

</body>
</html>
JavaScript:
<script>

function input(){

input1 = document.getElementById("forzaEquilibrante");
input2 = document.getElementById("peso");
input3 = document.getElementById("altezza");
input4 = document.getElementById("lunghezza");

form1 = document.getElementById("form1");
form2 = document.getElementById("form2");
risultato = document.getElementById("risultato");

var incognita = document.getElementById("incognita").value;

    form1.style.display="none"
    form2.style.display="block"
    risultato.style.display="block"
    
    if(incognita === "Fe"){
       input1.style.display="none"
    }
    else if(incognita === "P"){
       input2.style.display="none"
    }
    else if(incognita === "h"){
       input3.style.display="none"
    }
    else if(incognita === "L"){
        input4.style.display="none"
    }
}


function calcolo(){

var incognita = document.getElementById("incognita").value;
var forzaEquilibrante = document.getElementById("forzaEquilibrante").value;
var peso = document.getElementById("peso").value;
var altezza = document.getElementById("altezza").value;
var lunghezza = document.getElementById("lunghezza").value;


    if(incognita === "Fe"){
        document.getElementById("risultato").innerHTML = ((altezza / lunghezza) * peso + "N");
    }
    else if(incognita === "P"){
        document.getElementById("risultato").innerHTML = forzaEquilibrante /(altezza / lunghezza) + "N";
    }
    else if(incognita === "h"){
        document.getElementById("risultato").innerHTML = (forzaEquilibrante / peso) * lunghezzza + "m";
    }
    else if(incognita === "L"){
        document.getElementById("risultato").innerHTML = forzaEquilibrante / (peso * altezza) + "m";
    }
    
}

</script>
 

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
cioè la seconda funzione va, ma la prima continua a darmi solo gli input 1 2 e 3 per qualsiasi valore dell'incognita, avete mica idea del perchè?
 

WmbertSea

Utente Attivo
28 Nov 2014
178
27
28
Ciao, non ho testato l'intero codice ma a vista noto qualche inesattezza. Hai usato lo stesso id="incognita" per i vari elementi, questo è un "grave" errore. Gli id devono essere necessariamente univoci all'interno di uno stesso documento html.

Nello script infatti hai usato document.getElementById("incognita") ma questo restituisce solo il primo elemento trovato con quell'id. Va da sé che, delle condizioni che hai messo a seguire, sarà verificata solo la prima.

Se vuoi determinare quale di quei radio è stato selezionato, il procedimento che stai usando è sbagliato.

Puoi usare invece una classe, anziché un id, da applicare ai tag con class="incognita". A quel punto puoi identificare il radio che è stato selezionato, usando una cosa tipo document.querySelector(".incognita:checked").

Non so se ci siano altri errori ma questo lo è sicuramente.


Codice:
io scrivo === perché sto imparando a programmare on line e ho visto che === è molto usato
Abbi pazienza ma il fatto che sia molto usato non deve di certo essere un pretesto per utilizzare una cosa di cui non si conosce la sua effettiva funzionalità.

Una qualche lettura non guasta di certo:
Operatori di confronto in JavaScript: == e ===
Come confrontare le stringhe in JavaScript?

In breve == (uguale a) e === (identico a) sono entrambi operatori di confronto ma il secondo è più rigido perché tiene in considerazione anche il "tipo" dei due operandi oltre al loro "valore".

Nel tuo caso l'uso dell'uno o dell'altro non ha una sostanziale differenza a livello funzionale, può essere comunque più preciso usare === dal momento che è certo il tipo di dati confrontati. Infatti la proprietà value di un elemento html è sempre espressa come stringa.

ma quelle non sono variabili, infatti non ho preso i valori, sono elementi e li sto associando a degli elementi html per cambiarne gli attributi CSS
Occhio, dal momento che le stai definendo a livello di script, in questo modo input1=document.getElementById("forzaEquilibrante"), si tratta sempre di variabili. Il fatto che tu non abbia usato l'istruzione var non fa altro che memorizzare quelle variabili a livello globale, dichiarandole in modo implicito.

Nel tuo caso forse non c'è molta differenza nell'usare var per dichiarare esplicitamente una variabile locale (cioè a livello di funzione) o non usarlo, e lasciare che la variabile sia dichiarata implicitamente a livello globale (visibile ovunque), ma in progetti più complessi, il fatto di avere delle variabili "vaganti" può diventare un problema.

Per una programmazione più "professionale" si utilizza lo strict mode con cui è reso obbligatorio dichiarare le variabili in modo esplicito. Vedi: Strict mode in Javascript.

A parte questo excursus prova a correggere quegli id come ti ho indicato e vedi se si risolve qualcosa.
 

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
Ciao, non ho testato l'intero codice ma a vista noto qualche inesattezza. Hai usato lo stesso id="incognita" per i vari elementi, questo è un "grave" errore. Gli id devono essere necessariamente univoci all'interno di uno stesso documento html.

Nello script infatti hai usato document.getElementById("incognita") ma questo restituisce solo il primo elemento trovato con quell'id. Va da sé che, delle condizioni che hai messo a seguire, sarà verificata solo la prima.

Se vuoi determinare quale di quei radio è stato selezionato, il procedimento che stai usando è sbagliato.

Puoi usare invece una classe, anziché un id, da applicare ai tag con class="incognita". A quel punto puoi identificare il radio che è stato selezionato, usando una cosa tipo document.querySelector(".incognita:checked").

Non so se ci siano altri errori ma questo lo è sicuramente.


Codice:
io scrivo === perché sto imparando a programmare on line e ho visto che === è molto usato
Abbi pazienza ma il fatto che sia molto usato non deve di certo essere un pretesto per utilizzare una cosa di cui non si conosce la sua effettiva funzionalità.

Una qualche lettura non guasta di certo:
Operatori di confronto in JavaScript: == e ===
Come confrontare le stringhe in JavaScript?

In breve == (uguale a) e === (identico a) sono entrambi operatori di confronto ma il secondo è più rigido perché tiene in considerazione anche il "tipo" dei due operandi oltre al loro "valore".

Nel tuo caso l'uso dell'uno o dell'altro non ha una sostanziale differenza a livello funzionale, può essere comunque più preciso usare === dal momento che è certo il tipo di dati confrontati. Infatti la proprietà value di un elemento html è sempre espressa come stringa.


Occhio, dal momento che le stai definendo a livello di script, in questo modo input1=document.getElementById("forzaEquilibrante"), si tratta sempre di variabili. Il fatto che tu non abbia usato l'istruzione var non fa altro che memorizzare quelle variabili a livello globale, dichiarandole in modo implicito.

Nel tuo caso forse non c'è molta differenza nell'usare var per dichiarare esplicitamente una variabile locale (cioè a livello di funzione) o non usarlo, e lasciare che la variabile sia dichiarata implicitamente a livello globale (visibile ovunque), ma in progetti più complessi, il fatto di avere delle variabili "vaganti" può diventare un problema.

Per una programmazione più "professionale" si utilizza lo strict mode con cui è reso obbligatorio dichiarare le variabili in modo esplicito. Vedi: Strict mode in Javascript.

A parte questo excursus prova a correggere quegli id come ti ho indicato e vedi se si risolve qualcosa.
grazie mille degli utili consigli, sono alle prime armi e ho ancora molto da imparare, appena posso correggo quegli id e poi vi faccio sapere
 

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
Ho provato a usare document.querySelector("incognita:checked) ma non si colora nello script, inoltrequando provo a visualizzarlo la console mi da questo errore:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '.incognita: checked' is not a valid selector.
at input at HTMLInputElement.onclick
 

WmbertSea

Utente Attivo
28 Nov 2014
178
27
28
Ho provato a usare document.querySelector("incognita:checked) ma non si colora nello script
Cosa significa "non si colora nello script"?

Qui comunque lo hai scritto male, manca il punto che definisce la classe e il doppio apice di chiusura della stringa. Prova a controllare nel tuo codice. Guarda esattamente ciò che ho scritto nel precedente post.

Se non noti l'errore prova a postare nuovamente il codice html e javascript che hai modificato, vediamo se ci sono ulteriori errori.
 

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
ho trovato l'errore,
Cosa significa "non si colora nello script"?

Qui comunque lo hai scritto male, manca il punto che definisce la classe e il doppio apice di chiusura della stringa. Prova a controllare nel tuo codice. Guarda esattamente ciò che ho scritto nel precedente post.

Se non noti l'errore prova a postare nuovamente il codice html e javascript che hai modificato, vediamo se ci sono ulteriori errori.
si ho trovato l'errore, ma comunque non funziona perché quando clicco il primo pulsante mi appare tutto il form2 senza eliminare uno dei campi input e in più cliccando il secondo bottone non calcola il risultato,
 

Leonardo Scotti

Utente Attivo
19 Apr 2020
53
1
8
La Spezia
Cosa significa "non si colora nello script"?

Qui comunque lo hai scritto male, manca il punto che definisce la classe e il doppio apice di chiusura della stringa. Prova a controllare nel tuo codice. Guarda esattamente ciò che ho scritto nel precedente post.

Se non noti l'errore prova a postare nuovamente il codice html e javascript che hai modificato, vediamo se ci sono ulteriori errori.
per non si colora intendo che quando digiti per esempiodocument.getElementById() il testo cambia colore, mentre con querySelector no