Insérer un caractère dans une zone texte
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 :aie::aie:)
Code:
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="×" /> </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="÷" /> </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="−" /> </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:
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:
<table class="calculatrice" id="calc">
J'espère avoir été clair dans mes explications et questions.
Merci par avance.
