Pb pour changer couleur des boutons

Signaler
Messages postés
19
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
24 juillet 2021
-
Messages postés
19
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
24 juillet 2021
-
Bonjour,
je suis arrive à changer la couleur de la calculatrice mais pas celui des boutons.
A titre d'exemple si vous pouvez mettre en jaune le bouton 7 ca m'arrangerais beaucoup.
config>Windows / Chrome 91.0.4472.164</config>
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')
{
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:red;
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>

3 réponses

Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021
453
Bonjour,

Une solution possible :
.calc_btn[value="7"] {
  background-color: yellow;
}
Salut,
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.
Messages postés
19
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
24 juillet 2021

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
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021
453
Une autre solution (non recommandée) pourrait être l'ajout d'un attribut style directement sur la balise hml :
<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);" />
Messages postés
19
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
24 juillet 2021
>
Messages postés
2422
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
24 juillet 2021

bonjour Pitet je me suis planté: je dois tout refaire .
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).
Messages postés
19
Date d'inscription
samedi 22 février 2014
Statut
Membre
Dernière intervention
24 juillet 2021
> Tomahawk
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