Pb pour changer couleur des boutons
Fermé
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
-
22 juil. 2021 à 03:43
rocdan13 Messages postés 33 Date d'inscription samedi 22 février 2014 Statut Membre Dernière intervention 22 août 2021 - 9 août 2021 à 09:35
rocdan13 Messages postés 33 Date d'inscription samedi 22 février 2014 Statut Membre Dernière intervention 22 août 2021 - 9 août 2021 à 09:35
A voir également:
- Pb pour changer couleur des boutons
- Changer dns - Guide
- Piratage facebook changer mot de passe - Guide
- Changer la couleur de la barre des taches - Guide
- Changer clavier qwerty en azerty - Guide
- Somme si couleur - Guide
7 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
22 juil. 2021 à 09:52
22 juil. 2021 à 09:52
Bonjour,
Une solution possible :
Une solution possible :
.calc_btn[value="7"] {
background-color: yellow;
}
Salut,
c'est vieux 1999...il serait temps de se mettre à jour.
en HTML5 beaucoup plus simple sauf si vous tenez au xhtml:
Pareil pour eval en JavaScript il ne faut pas utiliser car potentiellement à risque, détails ici:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
Pareil pour le reste du code il est facilement améliorable avec quelques bonnes pratiques de programmation JS pour le rendre clair et concis (à lire, interpréter et déboguer/modifier).
Par exemple en utilisant un switch à la place de if else... et même se passer du
c'est vieux 1999...il serait temps de se mettre à jour.
<!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">
en HTML5 beaucoup plus simple sauf si vous tenez au xhtml:
<!DOCTYPE html> <html>
Pareil pour eval en JavaScript il ne faut pas utiliser car potentiellement à risque, détails ici:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
Pareil pour le reste du code il est facilement améliorable avec quelques bonnes pratiques de programmation JS pour le rendre clair et concis (à lire, interpréter et déboguer/modifier).
Par exemple en utilisant un switch à la place de if else... et même se passer du
if((evt.keyCode>95) && (evt.keyCode<106)car ce ne seront pas des cas du switch donc à traiter dans default.
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
23 juil. 2021 à 09:18
23 juil. 2021 à 09:18
merci Pitet : ça fonctionne "impec" : tu pourras me donner les autres solutions si tu as le temps.
bonne journée
.................................................................................................................................................................
merci Tomahawk de ta réponse : la prochaine fois je regarderais mieux la date: c'est déjà dur de
de trouver un programme qui fonctionne : donne moi des adresses si tu sais : moi je suis débutant et comme tu vois j'ai besoin de conseils.
bonne journée
bonne journée
.................................................................................................................................................................
merci Tomahawk de ta réponse : la prochaine fois je regarderais mieux la date: c'est déjà dur de
de trouver un programme qui fonctionne : donne moi des adresses si tu sais : moi je suis débutant et comme tu vois j'ai besoin de conseils.
bonne journée
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
23 juil. 2021 à 10:54
23 juil. 2021 à 10:54
Une autre solution (non recommandée) pourrait être l'ajout d'un attribut style directement sur la balise hml :
On pourrait aussi ajouter une classe spécifique pour ce bouton puis styliser cette classe dans le code css :
<input type="button" class="calc_btn" value="7" style="background-color: yellow;" onclick="javascript:add_calc('calc',7);" />
On pourrait aussi ajouter une classe spécifique pour ce bouton puis styliser cette classe dans le code css :
.calc_btn7 { background-color: yellow; }
<input type="button" class="calc_btn calc_btn7" value="7" onclick="javascript:add_calc('calc',7);" />
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
24 juil. 2021 à 07:42
24 juil. 2021 à 07:42
bonjour Pitet je me suis planté: je dois tout refaire .
bonne journée
bonne journée
Pour toutes les recherches il y a ce site:
https://www.google.fr/
En indiquant le plus précisément la recherche,
exemples: "débuter HTML",
"apprendre HTML",
"cours CSS",
"bonnes pratiques JavaScript",
"qu'est ce qu'un algorithme?"
etc...
et en regardant la date de publication et en faisant un peu de tri(et éviter la/les premières réponses qui sont publicitaires).
Il y a aussi des sites de références comme:
Ici le consortium du web(qui édicte les normes comme celles du HTML5) et propose bien sûr une notice et détails des langages(HTML, CSS et plus).
https://www.w3schools.com/cssref/css_selectors.asp
Et un des principaux contributeurs au langage JavaScript:
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/switch
Et bien sûr des articles et publications précises sur un point/sujet particulier, par exemple:
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
Mais pour l'instant apprendre des bases solides(dans l'ordre HTML, CSS puis JavaScript) vous serra utile, des moyens d'apprendre il y en a un paquet et des gratuits(souvent de bonne qualité et permettant de travailler seul).
https://www.google.fr/
En indiquant le plus précisément la recherche,
exemples: "débuter HTML",
"apprendre HTML",
"cours CSS",
"bonnes pratiques JavaScript",
"qu'est ce qu'un algorithme?"
etc...
et en regardant la date de publication et en faisant un peu de tri(et éviter la/les premières réponses qui sont publicitaires).
Il y a aussi des sites de références comme:
Ici le consortium du web(qui édicte les normes comme celles du HTML5) et propose bien sûr une notice et détails des langages(HTML, CSS et plus).
https://www.w3schools.com/cssref/css_selectors.asp
Et un des principaux contributeurs au langage JavaScript:
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/switch
Et bien sûr des articles et publications précises sur un point/sujet particulier, par exemple:
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener
Mais pour l'instant apprendre des bases solides(dans l'ordre HTML, CSS puis JavaScript) vous serra utile, des moyens d'apprendre il y en a un paquet et des gratuits(souvent de bonne qualité et permettant de travailler seul).
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
>
Tomahawk
24 juil. 2021 à 07:53
24 juil. 2021 à 07:53
j'ai eu un problème : je dois tout refaire.
pour le moment , je suis allé a https://www.w3schools.com/cssref/css_selectors.asp je l'ai mis dans mes favoris
merci et bonne journée
pour le moment , je suis allé a https://www.w3schools.com/cssref/css_selectors.asp je l'ai mis dans mes favoris
merci et bonne journée
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
26 juil. 2021 à 04:36
26 juil. 2021 à 04:36
Bonjour il y a une anomalie sur le bouton " avec flèche " pour déduire progressivement les chiffres : il met à 0 d'un coup,
et cela même sur le modèle original .
shttp://www.supportduweb.com/scripts_tutoriaux-code-source-12-calculatrice-en-javascript-avec-bouttons.html#:~:text=Ce%20script%20est%20une%20calculatrice,cette%20calculatrice%20offres%20plusieurs%20options.&text=Elle%20peut%20faire%20les%20op%C3%A9rations,Le%20modulo%20(%25)
si tu peux quelle chose !
et cela même sur le modèle original .
shttp://www.supportduweb.com/scripts_tutoriaux-code-source-12-calculatrice-en-javascript-avec-bouttons.html#:~:text=Ce%20script%20est%20une%20calculatrice,cette%20calculatrice%20offres%20plusieurs%20options.&text=Elle%20peut%20faire%20les%20op%C3%A9rations,Le%20modulo%20(%25)
si tu peux quelle chose !
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
26 juil. 2021 à 12:13
26 juil. 2021 à 12:13
Je ne comprends pas l'anomalie.
Est-il possible de nous donner un exemple précis (actions effectuées, résultat obtenu et résultat attendu) ?
Est-il possible de nous donner un exemple précis (actions effectuées, résultat obtenu et résultat attendu) ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
26 juil. 2021 à 14:26
26 juil. 2021 à 14:26
quand on divise un nombre (exemple : 22/7) il y a une multitude de chiffre après la virgule.
normalement le bouton avec la flèche sert à enlever un chiffre à chaque fois qu'on l'actionne:
Là ça passe directement à 0 : il n'a donc aucune utilité puisse il agit comme le bouton "CE"
merci de m'avoir répondu
bonne journée
normalement le bouton avec la flèche sert à enlever un chiffre à chaque fois qu'on l'actionne:
Là ça passe directement à 0 : il n'a donc aucune utilité puisse il agit comme le bouton "CE"
merci de m'avoir répondu
bonne journée
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
26 juil. 2021 à 15:40
26 juil. 2021 à 15:40
L'anomalie vient de cette partie du code dans la fonction f_calc() :
-> Si la valeur de résultat est comprise entre -9 et +9 , on défini le résultat à 0.
Or 22/7 = 3,14285... -> le résultat est bien compris entre -9 et +9, la condition est donc vraie.
Au lieu de vérifier si le résultat est compris entre -9 et +9, une autre solution serait de vérifier si le nombre de chiffres dans le résultats est supérieur à 1.
else if(n=='nbs')
{
if($id(id+'_resultat').value<10 && $id(id+'_resultat').value>-10)
{
$id(id+'_resultat').value=0;
}
// [...]
-> Si la valeur de résultat est comprise entre -9 et +9 , on défini le résultat à 0.
Or 22/7 = 3,14285... -> le résultat est bien compris entre -9 et +9, la condition est donc vraie.
Au lieu de vérifier si le résultat est compris entre -9 et +9, une autre solution serait de vérifier si le nombre de chiffres dans le résultats est supérieur à 1.
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
29 juil. 2021 à 03:58
29 juil. 2021 à 03:58
Tu as bien fait de ne pas me répondre : c'est mon travail .
2 jours de travail pour voir que c'était une accolade en trop.
'l'Anomalie n'est pas résolu est j'attends tes consignes stp : merci !
2 jours de travail pour voir que c'était une accolade en trop.
'l'Anomalie n'est pas résolu est j'attends tes consignes stp : merci !
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculatrice en javascript</title>
<script type="text/javascript">
calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
return document.getElementById(id);
}
function f_calc(id,n)
{
if(n=='ce')
{
initialiser_calc(id);
}
else if(n=='=')
{
if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
{
eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
calc_array[id][0] = '=';
$id(id+'_resultat').value=calcul;
calc_array[id][2]=calcul;
calc_array[id][3]=0;
}
}
else if(n=='+-')
{
$id(id+'_resultat').value=$id(id+'_resultat').value*(-1);
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
pas_ch = 1;
}
else if(n=='nbs')
{
if($id(id+'_resultat').value<10 && $id(id+'_resultat').value>-10)
{
$id(id+'_resultat').value=0;
}
else
{
$id(id+'_resultat').value=$id(id+'_resultat').value.slice(0,$id(id+'_resultat').value.length-1);
}
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
}
else
{
if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
{
eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
$id(id+'_resultat').value=calcul;
calc_array[id][2]=calcul;
calc_array[id][3]=0;
}
calc_array[id][0] = n;
}
if(pas_ch==0)
{
calc_array[id][1] = 1;
}
else
{
pas_ch=0;
}
document.getElementById(id+'_resultat').focus();
return true;
}
function add_calc(id,n)
{
if(calc_array[id][1]==1)
{
$id(id+'_resultat').value=n;
}
else
{
$id(id+'_resultat').value+=n;
}
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
calc_array[id][1] = 0;
document.getElementById(id+'_resultat').focus();
return true;
}
function initialiser_calc(id)
{
$id(id+'_resultat').value=0;
calc_array[id] = new Array('=',1,'0','0',0);
document.getElementById(id+'_resultat').focus();
return true;
}
function key_detect_calc(id,evt)
{
if((evt.keyCode>95) && (evt.keyCode<106))
{
var nbr = evt.keyCode-96;
add_calc(id,nbr);
}
else if((evt.keyCode>47) && (evt.keyCode<58))
{
var nbr = evt.keyCode-48;
add_calc(id,nbr);
}
else if(evt.keyCode==107)
{
f_calc(id,'+');
}
else if(evt.keyCode==109)
{
f_calc(id,'-');
}
else if(evt.keyCode==106)
{
f_calc(id,'*');
}
else if(evt.keyCode==111)
{
f_calc(id,'/');
}
else if(evt.keyCode==110)
{
add_calc(id,'.');
}
else if(evt.keyCode==190)
{
add_calc(id,'.');
}
else if(evt.keyCode==188)
{
add_calc(id,'.');
}
else if(evt.keyCode==13)
{
f_calc(id,'=');
}
else if(evt.keyCode==46)
{
f_calc(id,'ce');
}
else if(evt.keyCode==8)
{
f_calc(id,'nbs');
}
else if(evt.keyCode==27)
{
f_calc(id,'ce');
}
return true;
}
</script>
<style type="text/css">
.calculatrice
{
width:300px;
height:300px;
background-color:#eeeeee;
border:2px solid #CCCCCC;
margin:auto;
padding-left:5px;
padding-bottom:5px;
}
.calculatrice td
{
height:16.66%;
}
.calc_td_resultat
{
text-align:center;
}
.calc_resultat
{
width:90%;
text-align:right;
}
.calc_td_calculs
{
text-align:center;
}
.calc_calculs
{
width:90%;
text-align:left;
}
.calc_td_btn
{
width:25%;
height:100%;
}
.calc_btn
{
width:90%;
height:90%;
font-size:20px;
}
</style>
</head>
<body>
<table class="calculatrice" id="calc">
<tr>
<td colspan="4" class="calc_td_resultat">
<input type="text" readonly="readonly" name="calc_resultat" id="calc_resultat" class="calc_resultat" onkeydown="javascript:key_detect_calc('calc',event);" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="←" onclick="javascript:f_calc('calc','nbs');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="÷" onclick="javascript:f_calc('calc','/');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="±" onclick="javascript:f_calc('calc','+-');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('calc').onload=initialiser_calc('calc');
</script>
</body>
</html>
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
30 juil. 2021 à 10:34
30 juil. 2021 à 10:34
merci pour ce que tu m'as appris
tu ne saurais pas ou je pourrais aller pour mon pb ?
bonne journée
tu ne saurais pas ou je pourrais aller pour mon pb ?
bonne journée
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
>
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
Modifié le 30 juil. 2021 à 13:30
Modifié le 30 juil. 2021 à 13:30
Comme indiqué dans mon précédent message, il faut corriger le code qui se situe dans cette condition :
Concernant le code, au lieu de vérifier si le résultat est compris entre -9 et +9, une solution alternative serait de convertir le résultat en chaine de caractère (via toString()) pour compter le nombre de caractères dans cette chaine (via length). Puis :
- Si le nombre de caractères est inférieur ou égale à 1 (par exemple si le résultat vaut "3"), on défini le résultat à 0.
- Si le nombre de caractères est supérieur à 1 (par exemple si le résultat vaut "3.14"), on supprime le dernier caractère de la chaine (via slice(-1)) et on affecte la nouvelle valeur dans le résultat ("3.1" pour cet exemple).
- Il faut juste gérer un cas spécifique si l'avant dernier caractère du résultat est le caractère "." (par exemple si le résultat vaut "3.1"), il faut alors supprimer les deux derniers caractères de la chaine (en effet le nouveau résultat pour cet exemple devra être "3" et non pas "3.")
Un exemple à adapter à ton code : https://jsfiddle.net/rh90u7gs/
else if(n=='nbs')
{
// ici le code corrigé
}
Concernant le code, au lieu de vérifier si le résultat est compris entre -9 et +9, une solution alternative serait de convertir le résultat en chaine de caractère (via toString()) pour compter le nombre de caractères dans cette chaine (via length). Puis :
- Si le nombre de caractères est inférieur ou égale à 1 (par exemple si le résultat vaut "3"), on défini le résultat à 0.
- Si le nombre de caractères est supérieur à 1 (par exemple si le résultat vaut "3.14"), on supprime le dernier caractère de la chaine (via slice(-1)) et on affecte la nouvelle valeur dans le résultat ("3.1" pour cet exemple).
- Il faut juste gérer un cas spécifique si l'avant dernier caractère du résultat est le caractère "." (par exemple si le résultat vaut "3.1"), il faut alors supprimer les deux derniers caractères de la chaine (en effet le nouveau résultat pour cet exemple devra être "3" et non pas "3.")
Un exemple à adapter à ton code : https://jsfiddle.net/rh90u7gs/
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
3 août 2021 à 05:41
3 août 2021 à 05:41
j'en ai marre de ce chose : dis moi combien il te faut pour tu sois motivé a me le faire
bonne journée
bonne journée
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
27 juil. 2021 à 04:21
27 juil. 2021 à 04:21
Comme je pensais : j'ai encore 'planté' je t'envoie le 'malade' : fais en se que tu veux.
Il faut pas oublier que je suis débutant surtout en JavaScript.
merci par avance
bonne journée
Il faut pas oublier que je suis débutant surtout en JavaScript.
merci par avance
bonne journée
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculatrice en javascript</title>
<script type="text/javascript">
calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
return document.getElementById(id);
}
function f_calc(id,n)
{
if(n=='ce')
{
initialiser_calc(id);
}
else if(n=='=')
{
if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
{
eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
calc_array[id][0] = '=';
$id(id+'_resultat').value=calcul;
calc_array[id][2]=calcul;
calc_array[id][3]=0;
}
}
else if(n=='+-')
{
$id(id+'_resultat').value=$id(id+'_resultat').value*(-1);
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
pas_ch = 1;
}
else if(n=='nbs')
{
else if(n=='nbs')
{
if($id(id+'_resultat').value<10 && $id(id+'_resultat').value>-10)
{
$id(id+'_resultat').value=0;
}
}
else
{
$id(id+'_resultat').value=$id(id+'_resultat').value.slice(0,$id(id+'_resultat').value.length-1);
}
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
}
else
{
if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
{
eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
$id(id+'_resultat').value=calcul;
calc_array[id][2]=calcul;
calc_array[id][3]=0;
}
calc_array[id][0] = n;
}
if(pas_ch==0)
{
calc_array[id][1] = 1;
}
else
{
pas_ch=0;
}
document.getElementById(id+'_resultat').focus();
return true;
}
function add_calc(id,n)
{
if(calc_array[id][1]==1)
{
$id(id+'_resultat').value=n;
}
else
{
$id(id+'_resultat').value+=n;
}
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
calc_array[id][1] = 0;
document.getElementById(id+'_resultat').focus();
return true;
}
function initialiser_calc(id)
{
$id(id+'_resultat').value=0;
calc_array[id] = new Array('=',1,'0','0',0);
document.getElementById(id+'_resultat').focus();
return true;
}
function key_detect_calc(id,evt)
{
if((evt.keyCode>95) && (evt.keyCode<106))
{
var nbr = evt.keyCode-96;
add_calc(id,nbr);
}
else if((evt.keyCode>47) && (evt.keyCode<58))
{
var nbr = evt.keyCode-48;
add_calc(id,nbr);
}
else if(evt.keyCode==107)
{
f_calc(id,'+');
}
else if(evt.keyCode==109)
{
f_calc(id,'-');
}
else if(evt.keyCode==106)
{
f_calc(id,'*');
}
else if(evt.keyCode==111)
{
f_calc(id,'/');
}
else if(evt.keyCode==110)
{
add_calc(id,'.');
}
else if(evt.keyCode==190)
{
add_calc(id,'.');
}
else if(evt.keyCode==188)
{
add_calc(id,'.');
}
else if(evt.keyCode==13)
{
f_calc(id,'=');
}
else if(evt.keyCode==46)
{
f_calc(id,'ce');
}
else if(evt.keyCode==8)
{
f_calc(id,'nbs');
}
else if(evt.keyCode==27)
{
f_calc(id,'ce');
}
return true;
}
</script>
<style type="text/css">
.calculatrice
{
width:300px;
height:300px;
background-color:#eeeeee;
border:2px solid #CCCCCC;
margin:auto;
padding-left:5px;
padding-bottom:5px;
}
.calculatrice td
{
height:16.66%;
}
.calc_td_resultat
{
text-align:center;
}
.calc_resultat
{
width:90%;
text-align:right;
}
.calc_td_calculs
{
text-align:center;
}
.calc_calculs
{
width:90%;
text-align:left;
}
.calc_td_btn
{
width:25%;
height:100%;
}
.calc_btn
{
width:90%;
height:90%;
font-size:20px;
}
</style>
</head>
<body>
<table class="calculatrice" id="calc">
<tr>
<td colspan="4" class="calc_td_resultat">
<input type="text" readonly="readonly" name="calc_resultat" id="calc_resultat" class="calc_resultat" onkeydown="javascript:key_detect_calc('calc',event);" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="←" onclick="javascript:f_calc('calc','nbs');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="÷" onclick="javascript:f_calc('calc','/');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="±" onclick="javascript:f_calc('calc','+-');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('calc').onload=initialiser_calc('calc');
</script>
</body>
</html>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
6 août 2021 à 08:37
6 août 2021 à 08:37
Que ton code soit incorrect quand on apprends c'est normal, l'important est de comprendre où on se trompe et comment on le corrige, hélas tu n'explique pas ce qui te bloque, ni ce que tu as testé ou ce que tu ne comprends pas.
Si tu veux vraiment t'améliorer : apprends à débugger ton code javascript pas à pas avec les outils de développement de ton navigateur : https://developer.mozilla.org/fr/docs/Tools/Debugger (doc pour Firefox mais l'équivalent existe pour les autres navigateurs récents)
Le code original que tu repris depuis le site supportduweb.com n'est pas récent et utilise des anciennes pratiques obsolètes (cf message Tomahawk). Quitte à reprendre un code tout fait, autant en chercher un plus à jour. L'idéal pour t'améliorer serait de suivre un tuto permettant de construire ta propre calculatrice, en cherchant un tuto récent par exemple :
https://www.section.io/engineering-education/building-a-calculator-a-javascript-project-for-beginners/
https://freshman.tech/calculator/
https://www.freecodecamp.org/news/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98/
Enfin, les modifications indiquées dans mon précédent message aurait pu être appliquées comme ceci : https://jsfiddle.net/aeLfndbp/
Si tu veux vraiment t'améliorer : apprends à débugger ton code javascript pas à pas avec les outils de développement de ton navigateur : https://developer.mozilla.org/fr/docs/Tools/Debugger (doc pour Firefox mais l'équivalent existe pour les autres navigateurs récents)
Le code original que tu repris depuis le site supportduweb.com n'est pas récent et utilise des anciennes pratiques obsolètes (cf message Tomahawk). Quitte à reprendre un code tout fait, autant en chercher un plus à jour. L'idéal pour t'améliorer serait de suivre un tuto permettant de construire ta propre calculatrice, en cherchant un tuto récent par exemple :
https://www.section.io/engineering-education/building-a-calculator-a-javascript-project-for-beginners/
https://freshman.tech/calculator/
https://www.freecodecamp.org/news/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98/
Enfin, les modifications indiquées dans mon précédent message aurait pu être appliquées comme ceci : https://jsfiddle.net/aeLfndbp/
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
>
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
9 août 2021 à 09:35
9 août 2021 à 09:35
Bonjour ! toutes les informations que tu m'as donné me font tourner la tète et j'ai besoin d'un temps de repos
pour savoir où je vais
A BIENTOT et merci
bonne journée
pour savoir où je vais
A BIENTOT et merci
bonne journée
rocdan13
Messages postés
33
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
22 août 2021
2 août 2021 à 06:03
2 août 2021 à 06:03
Bonjour Pitet . je te remercie pour tes instructions mais c'est trop fort pour un début : je plante sans arrêt :fait
moi faire plutôt quelque chose avec "if": c'est plus mon rayon : celui la je le reprendrai après .
Bonne journée
moi faire plutôt quelque chose avec "if": c'est plus mon rayon : celui la je le reprendrai après .
Bonne journée
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculatrice en javascript</title>
<script type="text/javascript">
calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
return document.getElementById(id);
}
function f_calc(id,n)
{
if(n=='ce')
{
initialiser_calc(id);
}
else if(n=='=')
{
if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
{
eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
calc_array[id][0] = '=';
$id(id+'_resultat').value=calcul;
calc_array[id][2]=calcul;
calc_array[id][3]=0;
}
}
else if(n=='+-')
{
$id(id+'_resultat').value=$id(id+'_resultat').value*(-1);
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
pas_ch = 1;
}
else if(n=='nbs')
{
if($id(id+'_resultat').value<10 && $id(id+'_resultat').value>-10)
{
$id(id+'_resultat').value=0;
}
else
{
$id(id+'_resultat').value=$id(id+'_resultat').value.slice(0,$id(id+'_resultat').value.length-1);
}
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
}
else
{
if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
{
eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
$id(id+'_resultat').value=calcul;
calc_array[id][2]=calcul;
calc_array[id][3]=0;
}
calc_array[id][0] = n;
}
if(pas_ch==0)
{
calc_array[id][1] = 1;
}
document.getElementById(id+'_resultat').focus();
return true;
}
function add_calc(id,n)
{
if(calc_array[id][1]==1)
{
$id(id+'_resultat').value=n;
}
else
{
$id(id+'_resultat').value+=n;
}
if(calc_array[id][0]=='=')
{
calc_array[id][2] = $id(id+'_resultat').value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id+'_resultat').value;
}
calc_array[id][1] = 0;
document.getElementById(id+'_resultat').focus();
return true;
}
function initialiser_calc(id)
{
$id(id+'_resultat').value=0;
calc_array[id] = new Array('=',1,'0','0',0);
document.getElementById(id+'_resultat').focus();
return true;
}
function key_detect_calc(id,evt)
{
if((evt.keyCode>95) && (evt.keyCode<106))
{
var nbr = evt.keyCode-96;
add_calc(id,nbr);
}
else if((evt.keyCode>47) && (evt.keyCode<58))
{
var nbr = evt.keyCode-48;
add_calc(id,nbr);
}
else if(evt.keyCode==107)
{
f_calc(id,'+');
}
else if(evt.keyCode==109)
{
f_calc(id,'-');
}
else if(evt.keyCode==106)
{
f_calc(id,'*');
}
else if(evt.keyCode==111)
{
f_calc(id,'/');
}
else if(evt.keyCode==110)
{
add_calc(id,'.');
}
else if(evt.keyCode==190)
{
add_calc(id,'.');
}
else if(evt.keyCode==188)
{
add_calc(id,'.');
}
else if(evt.keyCode==13)
{
f_calc(id,'=');
}
else if(evt.keyCode==46)
{
f_calc(id,'ce');
}
else if(evt.keyCode==8)
{
f_calc(id,'nbs');
}
else if(evt.keyCode==27)
{
f_calc(id,'ce');
}
return true;
}
</script>
<style type="text/css">
.calculatrice
{
width:300px;
height:300px;
background-color:#eeeeee;
border:2px solid #CCCCCC;
margin:auto;
padding-left:5px;
padding-bottom:5px;
}
.calculatrice td
{
height:16.66%;
}
.calc_td_resultat
{
text-align:center;
}
.calc_resultat
{
width:90%;
text-align:right;
}
.calc_td_calculs
{
text-align:center;
}
.calc_calculs
{
width:90%;
text-align:left;
}
.calc_td_btn
{
width:25%;
height:100%;
}
.calc_btn
{
width:90%;
height:90%;
font-size:20px;
}
</style>
</head>
<body>
<table class="calculatrice" id="calc">
<tr>
<td colspan="4" class="calc_td_resultat">
<input type="text" readonly="readonly" name="calc_resultat" id="calc_resultat" class="calc_resultat" onkeydown="javascript:key_detect_calc('calc',event);" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="←" onclick="javascript:f_calc('calc','nbs');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="÷" onclick="javascript:f_calc('calc','/');" />
</td>
</tr>
<tr>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="±" onclick="javascript:f_calc('calc','+-');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
</td>
<td class="calc_td_btn">
<input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('calc').onload=initialiser_calc('calc');
</script>
</body>
</html>
