Insérer un caractère dans une zone texte

**kha0s** · 16/11/2014, 02h52

Bonjour,

J'espère vraiment ne pas me tromper de forum (il y a peu de chance).
Je débute complètement en développement (je sais même pas si on peut parler de développement à mon niveau...) et j'ai décidé de commencer par HTML CSS et Javascript bien sure.
Pour ce début d'aventure j'ai un exercice qui est de créer une calculatrice avec javascript...classique me suis-je dit...

Seulement j'ai beaucoup de mal à appréhender la logique à employer pour consevoir et écrire le code... les histoire de valeur à retourner, la logique de la syntaxe etc etc (la rigueur est une chose, mais la logique n'est jamais mentionnée dans les sources que je trouve..., peut être que je pars de trop loin....?)
Bref,

J'ai ma syntaxe en xHTML strict ou j'ai employé un tableau pour mes boutons ainsi que le test que j'ai fait pour pouvoir insérer les chiffres dans ma zone de texte et ensuite me tirer les cheuveux sur les fonctions de calcul et la vérification de la division par 0.

(ne soyez pas trop dur hein

)

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<!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="WARDI Kamal" />
			<meta name="keyword" content="html, xhtml, calculatrice" />
		<title>Ma première calculatrice en JS</title>
		<script type="text/javascript">
                        /* Ajoute les chiffres dans le champ texte. */  
                        function saisir () {
                                document.getElementById("zone_saisie").value = document.getElementById("zone_saisie").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>
			<tr>
				<td colspan="4">
				<input type="text" name="zone_saisie" id="zone_saisie" /> </td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" name="CE" id="ce" value="CE" onclick="alert(exemple)" /> </td>
				<td colspan="2"><input type="button" name="CE" id="ce" value="CE" onclick="reset" /> </td>
			</tr>
			<tr>
				<td><input type="button" name="sept" id="sept" value="7" onclick="saisir('7');"/>	</td>
				<td><input type="button" name="huit" id="huit" value="8" />	</td>
				<td><input type="button" name="neuf" id="neuf" value="9" />	</td>
				<td><input type="button" name="sign_mult" id="sign_mult" value="&times;" />	</td>
			</tr>
			<tr>
				<td><input type="button" name="quatre" id="quatre" value="4" />	</td>
				<td><input type="button" name="cinq" id="cinq" value="5" />	</td>
				<td><input type="button" name="six" id="six" value="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" />	</td>
				<td><input type="button" name="deux" id="deux" value="2" />	</td>
				<td><input type="button" name="trois" id="trois" value="3" /> </td>
				<td><input type="button" name="sign_div" id="sign_div" value="&divide;" /> </td>
			</tr>
			<tr>
				<td colspan="0"><input type="button" name="zero" id="zero" value="0" />	</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="&minus;" /> </td>
			</tr>
		</table>
	</body>
 
</html>

Alors j'ai essayé comme on peut peut être le voir sur les 3 premières lignes de mon tableau de manipuler les boutons avec l'évènements onclick mais je n'ai aucuns résultats.... et je ne sais pas comment trouver mes erreurs...

Une idée pour moi ?
Je suis conscient du niveau de ma question mais les exemples que j'ai trouvé ne m'aident pas à comprendre la "logique de construction" des instructions...

par exemple :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" />
                </td>

Là je ne comprends pas les éléments donnés avec l'évènement... "f_calc" référence à la fonction créé mais pourquoi faire référence à l'id du formulaire

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

<table class="calculatrice" id="calc">

J'espère avoir été clair dans mes explications et questions.

Merci par avance.

**sekaijin** · 17/11/2014, 15h23

cette fonction est censé faire quoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
/* Ajoute les chiffres dans le champ texte. */	
function saisir () {
  document.getElementById("zone_saisie").value = document.getElementById("zone_saisie").value; 
}

je vois l'appel suivant: saisir (7).
Mais où est le paramètre dans la fonction ?[CODE]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
/* Ajoute les chiffres dans le champ texte. */	
function saisir () {
...

Je crois qu'il te faut prendre un tuto pour débutant et le suivre pas à pas
un bon book sur la programmation en général ne ferait pas de mal.

J'imagine que tu as appris le français à l'école et que tu te souviens qu'on ne jette pas le smots en vrac. même si comme moi l'écrit n'est pas parfait, il y a un minimum de règles à suivre pour que cela ait un sens.

il en va de même avec les langages informatique. jeter des bouts de code n'est pas suffisant pour que cela ait un sens.

Ma réponse se veut constructive. nous ne sommes pas là pour faire ton travail mais t'aider à le faire.
C'est pour cette raison que je ne donnerais pas ici de solution.
Il y a trop de chose à apprendre pour ammener ton code à quelque chose de cohérent et exploitable.
Une solution toute faite ne serait que pure perte.

A+JYT

**kha0s** · 17/11/2014, 15h47

Bonjour, et merci pour ta réponse.

Je me suis peut être mal exprimé, mais je ne voulais pas de code tout prêt, il y en a plusieurs sur internet et cela n'est pas l'objectif.
J'essaie d'apprendre

.

Mon objectif avec la fonction saisir() était de faire en sorte qu'avec le click sur le boutton, la valeur du bouton s'affiche dans mon champ texte.
J'ai compris une erreur dans ce que j'ai écrit... je demande à mettre la value de "zone_saisie" dans "zone_saisie" et j'aurai du mettre " += " au lieu de simplement = ...

J'ai bien commencé à lire un "cours" , comment dire...les éléments sont présentés, les principes etc etc, mais ca manque de "concret" je trouve...donc je m'y suis mis.
Je me trompe de méthode surement.

**sekaijin** · 17/11/2014, 17h51

Si tu veux un bon cours Javascript : http://javascript.developpez.com/cours/
Ce qui manque à ton code c'est Le B.A.BA

comment écrire une fonction
comment ecrire une fonction avecdes parramètres
comment appeler une fonction
comment appeler une fonction avec des paramètres

ensuite tu dans ton code l'erreur n'est pas un problème de = ou +=
tu affectes à une variable sa propre valeur ça n'a aucun sens.

donc la encore ce n'est pas un exemple concret qu'il manque mais le fondement du langage
comment utiliser les variables;

A+JYT

**kha0s** · 17/11/2014, 19h16

J'avais bien compri mon erreur...

Pas trés encourageant tout ca

mais bon j'ai compri le message.
Merci

Insérer un caractère dans une zone texte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager