funzione onclick non va

Leonardo Scotti

Utente Attivo
19 Apr 2020
55
2
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
614
58
28
18
Vicenza
Così a prima vista non saprei, io di solito quando ho problemi con JavaScript faccio vari alert per capire dove è l'errore. Fammi sapere
 

Tommy03

Utente Attivo
6 Giu 2018
614
58
28
18
Vicenza
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
55
2
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
3.041
192
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
55
2
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
55
2
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
55
2
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è?
 

Tommy03

Utente Attivo
6 Giu 2018
614
58
28
18
Vicenza
Forse il problema è che non hai messo alcuni punti e virgola nella prima funzione.
La console dà qualche errore?
 

WmbertSea

Utente Attivo
28 Nov 2014
209
33
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
55
2
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
55
2
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
209
33
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
55
2
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
55
2
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
C [RISOLTO][PHP] Funzione ONclick PHP 14
A Chiamata funzione PHP con onclick PHP 8
P Implementazione funzione FileReader Javascript 0
P Funzione copia multipla. Javascript 2
P Funzione jQuery Ajax invio file a php jQuery 1
A Funzione read URL PHP 6
F Funzione Glob - ricerca file contenente una parola PHP 1
A Mail con funzione mail() riconosciute come spam PHP 9
M Utilizzare la funzione mysql_num_rows() in PHP 5 PHP 3
A funzione iconv () non mi funziona PHP 4
D Come usare funzione php PHP 6
Y verificare condizione dopo esecuzione della funzione Programmazione 0
IClaude Funzione Javascript Javascript 8
A Funzione share come modificarla Social Media Marketing 0
L funzione onclik con seno e coseno non va Javascript 3
G modifica corretta funzione da eregi() a preg_match() PHP 3
Shyson Modificare funzione php PHP 15
L pdo (stampare un valore con ritorno a funzione) PHP 0
elpirata Funzione conversione da minuti in ore Javascript 0
@ [MS Access] Funzione Iif..is null... Database 0
F Funzione deprecata in PHP7 PHP 1
G [MS Access] Funzione ARROTONDA non definita nell'espressione MS Access 1
max1974 [Javascript] Funzione Errata procedura Javascript 2
pjtertdj Visualizzazione dati in php da mysql con funzione matematica in javascript PHP 1
Domenico_Falco1 Associare una stessa funzione get a due eventi a.click con classi differenti Ajax 6
psicomia Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select" Javascript 2
L Problema funzione mail() PHP PHP 3
elpirata [Javascript] Lo script alle volte funzione altre volte no Javascript 0
V [Visual Basic] Richiamare funzione su modulo per restituire list Visual Basic 0
R [Photoshop] funzione colore automatico Photoshop 0
maxnegri [PHP]Funzione di calcolo prezzo di una camera in un range di date PHP 62
L [PHP] problema count messo in una funzione. PHP 1
Monital funzione php si ripete due volte PHP 6
GiErre [PHP] [HTML] Disabilitare un link in funzione della piattaforma PHP 7
Monital Funzione php e campo database come variabile PHP 6
M Recuperare ID e usarlo in funzione jQuery 2
M PHP - Funzione non e scrive il risultato PHP 3
R [Javascript] Rendere una funzione sempre visibile Javascript 2
M funzione mysql che ritorna i microsecondi a partire dal 1-1-1970 MySQL 3
batmanLF [MySQL] Problema funzione SUM MySQL 1
F [PHP] La funzione setcookie PHP 0
F [Photoshop] sovrapporre due immagini usando funzione batch Photoshop 0
otto9due Capire la funzione del parametro event passato alla funzione.. jQuery 1
A [Javascript] tabella dinamica e onchange su funzione Javascript 1
M Problema con connessione MySqli e funzione PHP 2
A [PHP] Problema invio mail con funzione mail() PHP 3
C Creazione di una funzione per il filtraggio dei campi di un db Presentati al Forum 0
C richiamare una funzione in un altro script php PHP 1
P [Javascript] Inserire una nuova condizione in una funzione Javascript 3
S [PHP] errore funzione sleep PHP 5

Discussioni simili