Sujet Précédent Sujet Suivant

Calculatrice en JavaScript

Fermé
kha0s Messages postés 13 Date d'inscription jeudi 25 août 2011 Statut Membre Dernière intervention 11 mars 2017 - 19 nov. 2014 à 07:35
kha0s Messages postés 13 Date d'inscription jeudi 25 août 2011 Statut Membre Dernière intervention 11 mars 2017 - 20 nov. 2014 à 13:21
Bonjour à tous/toutes,

Je débute en Javascript et je dois créer une calculatrice, j'ai pas mal de difficultés dans la logique...

J'aimerai un coup de main svp.

Tout d'abord, je ne suis pas passé par un formulaire, je ne comprends pas pourquoi il faudrait le faire d'ailleur... je vous colle mon tout début de code. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >

	<head>
			<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
			<meta name="author" content="kha0s" />
			<meta name="keyword" content="html, xhtml, calculatrice" />
		<title>Ma première calculatrice en JS</title>
		
		<script type="text/javascript">
			
			var resultat ='';
			
			/* Ajoute les chiffres dans le champ texte. */	
			function saisir () {
				document.getElementById("zone_saisie").value += document.getElementById.("").value;
			  
			}
			
			/* Calcul l'opération demandé. */
			function calcul () {
			  
			}
			
			/* Vérifie que la division ne se fait pas par zéro, renvoi un message en cas d'erreur. */			
			function verif_divzero () {
			  
			}
			
			/* On remet le champ à zéro. */
			function reset () {
				document.getElementById("zone_saisie").value = '';
			  
			}
			
		</script>
	</head>

	<body>
		<table name="calculatrice">
			<tr>
				<td colspan="4">
				<input type="text" readonly="readonly" name="zone_saisie" id="zone_saisie" /> </td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" name="CE" id="ce" value="C" onclick="reset();" /> </td>
			</tr>
			<tr>
				<td><input type="button" name="sept" id="7" value="7" onclick="saisir();"/>	</td>
				<td><input type="button" name="huit" id="8" value="8" onclick="saisir();"/>	</td>
				<td><input type="button" name="neuf" id="9" value="9" onclick="saisir();"/>	</td>
				<td><input type="button" name="sign_mult" id="sign_mult" value="×" />	</td>
			</tr>
			<tr>
				<td><input type="button" name="quatre" id="quatre" value="4" onclick="saisir();"/>	</td>
				<td><input type="button" name="cinq" id="cinq" value="5" onclick="saisir();"/>	</td>
				<td><input type="button" name="six" id="six" value="6" onclick="saisir('6');" /> </td>
				<td><input type="button" name="sign_plus" id="sign_plus" value="+" /> </td>
			</tr>
			<tr>
				<td><input type="button" name="un" id="un" value="1" onclick="saisir();"/>	</td>
				<td><input type="button" name="deux" id="deux" value="2" onclick="saisir();"/>	</td>
				<td><input type="button" name="trois" id="trois" value="3" onclick="saisir();"/> </td>
				<td><input type="button" name="sign_div" id="sign_div" value="÷" /> </td>
			</tr>
			<tr>
				<td colspan="0"><input type="button" name="zero" id="zero" value="0" onclick="saisir();"/>	</td>
				<td><input type="button" name="virg" id="virg" value="," />	</td>
				<td><input type="button" name="sign_egal" id="sign_egal" value="=" /> </td>
				<td><input type="button" name="sign_mins" id="sign_minus" value="−" /> </td>
			</tr>
		</table>
	</body>

</html>


J'en suis à la première fonction ou je voudrais récupérer la valeur des bouton chiffres qui ont une id unique, seulement dans mon code actuel, je peux récupérer la valeur par id, pourrait on récupérer les valeurs avec la valeur autrement ?

J'avoue que je bute sur les premières difficultés mais j'ai vraiment du mal là.

Merci ! :)

A voir également:

2 réponses

Réponse 1 / 2
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
19 nov. 2014 à 12:23
Salut,

Tu peux par exemple récupérer la valeur du bouton cliqué comme ceci : 
<input type="button" value="7" onclick="saisir(this)">
    
<script>
function saisir(element) {
    var value = element.value;
    alert(value);
}


Bonne journée
1
Réponse 2 / 2
kha0s Messages postés 13 Date d'inscription jeudi 25 août 2011 Statut Membre Dernière intervention 11 mars 2017
20 nov. 2014 à 09:03
Hello,

Désolé pour le temps de réponse.
Merci pour ta proposition, j'ai 2 questions cependant.

1 - peux tu m'expliquer le "THIS" ?
2 - pourquoi mettre l'attribut "element" dans la fonction ?

Par contre j'ai pas utilisé de "alert", je voulais que le champ texte soit alimenté à chaque click sur un bouton donc j'ai fait ceci : 

function saisir (element) {
  var value = element.value;
  document.getElementById("zone_saisie").value += value;
}
0
kha0s Messages postés 13 Date d'inscription jeudi 25 août 2011 Statut Membre Dernière intervention 11 mars 2017
Modifié par kha0s le 20/11/2014 à 13:22
Re, et voila la fin de mon programme, sauf que je n'en suis pas satisfait pour plusieurs raisons :

- je ne comprends pas le fonctionnement de "eval".
- le "element" est toujours un mystère pour moi.
- comment pourrais-je passer le "document.getElementById("zone_saisie").value" en variable ?
- comment améliorer mon code ? 


/* Ajoute les chiffres dans le champ texte. */
function saisir(element) {
 var value = element.value;
 document.getElementById("zone_saisie").value += value;
}

/* On ajoute le signe demandé */
function ajout(signe) {
 console.log(document.getElementById("zone_saisie").value);
 document.getElementById("zone_saisie").value = document.getElementById("zone_saisie").value + signe;
 }


function resultat() {
    var x = 0;
    x = eval(document.getElementById("zone_saisie").value);
    document.getElementById("zone_saisie").value = x;
    if (eval(document.getElementById("zone_saisie").value) == Infinity)
        {
            document.getElementById("zone_saisie").value = '';
            alert("Division par zero Interdite");
        }
    else    
    {}
}

/* On remet le champ à zéro. */
function reset() {
 document.getElementById("zone_saisie").value = '';

}



Et plus globalement, j'ai du mal à passer de l'idée à la logique de création du code...
J'ai vraiment du mal à passer de l'idée on concept et au code... quelqu'un à des idées de sources pour m'aider à "penser en programmeur" ?

Merci par avance.
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Entrer ses formules dans sa calculatrice TI-83
koko199 -
Pierr10 -

2 réponses
casio fx-92
Iln -
Babou -

2 réponses