Easy-Micro


LANGAGE Script JavaScript
Script de calcul

Script JavaScript de calcul


Exemple de calcul avec javascript

Calcul :


Copiez/coller ce code entre les balises <head> et </head> de votre document:

<script>
/* -- www.easy-micro.org -- */
function calcul() {
// "parseInt" convertir les valeurs en nombre
var expr1 = parseInt(window.document.monformulaire.expr1.value);
var expr2 = parseInt(window.document.monformulaire.expr2.value);
var ope = window.document.monformulaire.ope.value;
// eval() exécute un script à partir d'une chaîne
var resultat = eval(expr1 + ope + expr2);
window.document.monformulaire.result.value=resultat;

document.getElementById("affiche").style.display="inline";
document.monformulaire.result.style.display="inline";
document.monformulaire.result.disabled="true";
document.monformulaire.vider.style.display="inline";
}

function vidertout() {
document.monformulaire.expr1.value = '';
document.monformulaire.expr2.value = '';
document.monformulaire.result.value = '';

document.monformulaire.result.style.display="none";
document.monformulaire.vider.style.display="none";
document.getElementById("affiche").style.display="none";
}

</script>

Copiez/coller ensuite ce code entre les balises <body> et </body> de votre document:

<form name="monformulaire" action="" onkeypress="if (event.keyCode==13) {return calcul();}">
<table border="0" cellspacing="2" width="85%">
<tr align=center>
<th width="60">Calcul :</th>
<td width="30"><input type="text" name="expr1" size="3" /></td>
<td width="20"><select name="ope">
<option value="*">*</option>
<option value="/">/</option>
<option value="+">+</option>
<option value="-">-</option>
</select></td>
<td width="30"><input type="text" name="expr2" size="3" /></td>
<td width="80"><input type="button" value=" Calculer " onclick="calcul();" /></td>
<td width="30"><input type="button" name="vider" value=" c " style="display:none;" onclick="vidertout();"></td>
<td align="right"><div id="affiche" style="display:none;font-weight:bold;">Résultat :</div></td>
<td><input type="text" name="result" size="15" style="display:none;" /></td>
</tr></table></form>

Explication
La fonction eval() permet d'executer une opération. Sans elle, c'est la formule de calcul qui s'afficherai dans le résultat : un 8*8 au lieu du 64. Dans le formulaire, le champ "result" et le texte "Résultat" sont rendu invisible par le code CSS: "display:none;". On les fait apparaître avec la fonction javascript calcul() : style.display="inline".

Pour aller plus loin
On pourrait rajouter un test qui prévoit le clic direct sur le bouton "Calculer" (sans avoir saisi de chiffre). Ce test devra être rajouté dans la première fonction calcul() :

// si les champs expr1 et expr2 sont vide
if ( (document.monformulaire.expr1.value == "") || (document.monformulaire.expr2.value == "") ) {
// on fait disparaitre tous les champs
document.monformulaire.result.style.display="none";
document.monformulaire.vider.style.display="none";
document.getElementById("affiche").style.display="none";
// et on affiche un message
alert('Merci de saisir un chiffre');
}


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 13 novembre 2019 - Semaine 46 - Saint Brice (Demain: Saint Sidoine)
Aujourd'hui, c'est l'anniversaire de Whoopi Goldberg (1955-64 ans), actrice américaine (Ghost, Sister Act...). Autre 13 novembre: Attentats de Paris revendiqués par Daech : Stade de France - Terrasses de cafés et de restaurants - Salle du Bataclan Solidarité.
Haut de page Easy-Micro