Corsi on-line

Sommatoria automatica con JavaScript

In questo breve post vedremo come sia possibile creare un semplice calcolatore automatico basato su JavaScript che permetta di ottenere la sommatoria di più addendi passati allo script tramite campi di input; nel caso specifico la nostra somma verrà operata sulla base di un massimo di 5 termini per l’addizione che potranno essere però incrementati attraverso semplici modifiche.


Somma_JS

L’applicazione client side si basa su due funzioni; la prima, “startCalc()“, permetterà di inizializzare il calcolo sulla base di un intervallo introdotto tramite il metodo “setInterval()” che permetterà di invocare periodicamente “calc()“, la funzione deputata alla somma dei valori:

<script language="javascript" type="text/javascript">
<!--
function startCalc(){
interval = setInterval("calc()",1);
}
function calc(){
a_1 = document.formSommatoria.prezzo_1.value;
a_2 = document.formSommatoria.prezzo_2.value;
a_3 = document.formSommatoria.prezzo_3.value;
a_4 = document.formSommatoria.prezzo_4.value;
a_5 = document.formSommatoria.prezzo_5.value;
document.formSommatoria.campoRisultato.value = (a_1 * 1)+(a_2 * 1)+(a_3 * 1)+(a_4 * 1)+(a_5 * 1);
}
function stopCalc(){
clearInterval(interval);
}
</script>

Per quanto riguarda invece  il form utilizzato come “calcolatrice” (denominato “formSommatoria”), quest’ultimo sarà caratterizzato dalla presenza di un campo finale, chiamato “campoRisultato”, destinato alla visualizzazione dei risultati:

<form name="formSommatoria">
<input type=text name="prezzo_1" value="" onFocus="startCalc();"
onBlur="stopCalc();"> + <br />
<input type=text name="prezzo_2" value="" onFocus="startCalc();"
onBlur="stopCalc();"> + <br />
<input type=text name="prezzo_3" value="" onFocus="startCalc();"
onBlur="stopCalc();"> + <br />
<input type=text name="prezzo_4" value="" onFocus="startCalc();"
onBlur="stopCalc();"> + <br />
<input type=text name="prezzo_5" value="" onFocus="startCalc();"
onBlur="stopCalc();"> + <br />
= <input type=text name="campoRisultato">
</form> 

Naturalmente, quella proposta è solo una traccia di base, lo sviluppatore potrà eventualmente produrre valori e campi di input dinamicamente attraverso un linguaggio SSI come PHP.

Post correlati
I più letti del mese
Tematiche