Fonction sur onclick

Version imprimable

Bonjour,

Est-ce que quelqu'un peut m'aider à faire une fonction sur onclick.

J'ai 2 inputs A et B.

Les valeurs de ces deux input doivent etre complémentaire.

Si on click sur A (une première fois), il me faut un X dedans sur fond vert et on vide B sur fond blanc.
Si on click sur A et qu'elle contient X,il me faut un * dedans sur fond gris et idem dans B.
Si on click sur A et qu'elle contient *, il faut vider A et mettre un fond blanc et remplir B avec la valeur X sur fond orange.

Idem mais inversé si on click dans B.

VOici un exemple de code que j'avais fait mais malheureusement la fonction ondblclick ne fonctionne pas sur opera sur un appareil mobile. Je dois donc repenser le code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<td valign="center" width="6%"><input readonly maxlength="1" class="" name="reserve[<?php echo $i ;?>]" style="position:relative;width:100%;font-size:22px;height:36px;text-align:center;"  type="text" name="reserve[<?php echo $i ;?>]" id="reserve[<?php echo $i ;?>]"  onchange="coche(this,'noreserve[<?php echo $i ;?>]')"
onClick="
document.getElementById('reserve[<?php echo $i ;?>]').style.backgroundColor='#FFDC7F'; 
document.getElementById('reserve[<?php echo $i ;?>]').value='X';
document.getElementById('noreserve[<?php echo $i ;?>]').style.backgroundColor='#CFCFCF';
document.getElementById('noreserve[<?php echo $i ;?>]').value='';"
onDblclick="document.getElementById('reserve[<?php echo $i ;?>]').style.backgroundColor='#CFCFCF'; 
document.getElementById('reserve[<?php echo $i ;?>]').value='*';
document.getElementById('noreserve[<?php echo $i ;?>]').style.backgroundColor='#CFCFCF';
document.getElementById('noreserve[<?php echo $i ;?>]').value='*';" value="<?php echo $res_hor_audit; ?>"></td>
 
<td valign="center" width="6%"><input readonly maxlength="1" class="" name="noreserve[<?php echo $i ;?>]" style="position:relative;width:100%;font-size:22px;height:36px;text-align:center;"  type="text" name="noreserve[<?php echo $i ;?>]" id="noreserve[<?php echo $i ;?>]"  
onclick ="
document.getElementById('noreserve[<?php echo $i ;?>]').style.backgroundColor='#53EF4A';
document.getElementById('noreserve[<?php echo $i ;?>]').value='X'; 
document.getElementById('reserve[<?php echo $i ;?>]').style.backgroundColor='#CFCFCF';
document.getElementById('reserve[<?php echo $i ;?>]').value='';
"
onDblclick="document.getElementById('reserve[<?php echo $i ;?>]').style.backgroundColor='#CFCFCF'; 
document.getElementById('reserve[<?php echo $i ;?>]').value='*';
document.getElementById('noreserve[<?php echo $i ;?>]').style.backgroundColor='#CFCFCF';
document.getElementById('noreserve[<?php echo $i ;?>]').value='*';" value="<?php echo $nores_hor_audit; ?>"></td>

Merci de votre aide

18/05/2009, 09h03
andry.aime

Salut,
1-Je trouve que les instructions appelées dans onclick et ondblclick sont les mêmes, pourquoi ne pas utiliser une fonction qui regroupes ces instructions et mettre en paramètre les variables au lieu de recopier les codes.
2-Donne nous le HTML généré.

Réponse tardive j'étais en déplacement.
Ci-joint code mais attention ce code ne me convient pas vraiment.

JE cherche une optimisation.

Merci pour votre aide car je ne maitrise pas du tout javascript ainsi que vous pouvez le constater sur mon code.

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
 
<td width="10%"><select class="" name="type[15]" style="width:100%;background-color:#FFFFFF" type="text" id='type[15]' 
onchange="this.style.background=this.options[this.selectedIndex].style.background">
			<option selected value=''></option>			<option style="background:#FFFFFF" value="*">*</option>
			<option style="background:#53EF4A" value="Aucune">Aucune</option>
			<option style="background:#DCFF4F" value="Mineure" >Mineure</option>
            <option style="background:#FFA73F" value="Majeure">Majeure</option>
			<option style="background:#FF2F1F" value="Critique">Critique</option>
 
</select></td>
<td valign="center" width="6%"><input readonly maxlength="1" class="" name="reserve[15]" style="position:relative;width:100%;font-size:22px;height:36px;text-align:center;"  type="text" name="reserve[15]" id="reserve[15]"  onchange="coche(this,'noreserve[15]')"
onClick="
document.getElementById('reserve[15]').style.backgroundColor='#FFDC7F'; 
document.getElementById('reserve[15]').value='X';
document.getElementById('noreserve[15]').style.backgroundColor='#CFCFCF';
document.getElementById('noreserve[15]').value='';"
ondblclick="document.getElementById('reserve[15]').style.backgroundColor='#CFCFCF'; 
document.getElementById('reserve[15]').value='*';
document.getElementById('noreserve[15]').style.backgroundColor='#CFCFCF';
document.getElementById('noreserve[15]').value='*';" value=""></td>
 
<td valign="center" width="6%"><input readonly maxlength="1" class="" name="noreserve[15]" style="position:relative;width:100%;font-size:22px;height:36px;text-align:center;"  type="text" name="noreserve[15]" id="noreserve[15]"  
onclick ="
document.getElementById('noreserve[15]').style.backgroundColor='#53EF4A';
document.getElementById('noreserve[15]').value='X'; 
document.getElementById('reserve[15]').style.backgroundColor='#CFCFCF';
document.getElementById('reserve[15]').value='';
"
ondblclick="document.getElementById('reserve[15]').style.backgroundColor='#CFCFCF'; 
document.getElementById('reserve[15]').value='*';
document.getElementById('noreserve[15]').style.backgroundColor='#CFCFCF';
document.getElementById('noreserve[15]').value='*';" value="X"></td>

Salut,
Code:

1 2 3 4 5 6 function fonction(id1,id2,couleur1,couleur2,valeur1,valeur2){ document.getElementById(id1).style.backgroundColor=couleur1; document.getElementById(id1).value=valeur1; document.getElementById(id2).style.backgroundColor=couleur2; document.getElementById(id2).value=valeur2; }
Code:

onclick="fonction('reserve[15]','noreserve[15]','X','','#FFDC7F','#CFCFCF')"

Un td n'a pas de value.

Citation:

on fasse apparaitre à tour de rôle
*
mineure
majeure
crritique
*

Tu crées une variable globale que tu incrémentes à chaque click et ajouter mineure, majeure et critique selon la valeur de la variable.

15/06/2009, 19h41
Antherak

Bonjour,

Merci pour l'aide.

Je veux juste éclaircir un détail dans l'expression noreserve[15] le chiffre 15 est issue d'une boucle for ($i=0;$i<23;$i++)

Est-ce que le code fourni en exemple fonctionnera ?
car j'ai reamrqué que j'avais toujours eu des problème avec la transmission de variable php dans une fonction javascript

noreserve[<?php echo $i;?>]

Merci de l'aide

pour la deuxième remarque ce n'est pas le td qui est concerné mais le select
15/06/2009, 20h06
Antherak

Re bonjour,

J'ai fait l'essai avec la fonction fournit et ça marche. C'est sympa !
Je comprends petit à petit le concept javascript
Encore merci !