Changer la valeur d'un input � chaque click

Version imprimable

Bonjour,

Je fait un tableau (10x10 cases) dans lequel on peut mettre des 1 ou des 0 ou rien le tableau est compos� (extrait):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <input autocomplete="off" onPaste="return false" class="formulaire_Center" type="text" name="P000" value="'.$P[0][0][0].'" onchange="this.value=this.value.trim()" size="1" maxlength="1" /> </div></td> <td width="20%" ><div align="center"> <input autocomplete="off" onPaste="return false" class="formulaire_Center" type="text" name="P001" value="'.$P[0][0][1].'" onchange="this.value=this.value.trim()" size="1" maxlength="1" /> </div></td> <td width="20%" ><div align="center"> <input autocomplete="off" onPaste="return false" class="formulaire_Center" type="text" name="P002" value="'.$P[0][0][2].'" onchange="this.value=this.value.trim()" size="1" maxlength="1" /> </div></td> <td width="20%" ><div align="center"> <input autocomplete="off" onPaste="return false" class="formulaire_Center" type="text" name="P003" value="'.$P[0][0][3].'" onchange="this.value=this.value.trim()" size="1" maxlength="1" /> </div></td> <td width="20%" ><div align="center"> ......................
Je peux mettre des Id sur chaque input s�il le faut. L�ensemble est g�r� par PHP et enregistr� au fur et � mesure des clicks (ajax)

Malgr� mes recherches je n�ai pas trouv� de script pour m�aider et je n'arrive pas le faire

Serait-il possible que :

Lorsque je click dans une case :
-- S�il n�y a rien un 1 doit s�inscrire avec un fond vert
-- S�il y a un 1 un 0 doit s�inscrire avec un font rouge
-- S�il y a un 0 rien ne s�inscrit avec un fond transparent

Merci pour vos r�ponses

salut, c'est un truc comme ca que tu veux ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<table>
<td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P001" value="'.$P[0][0][0].'" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P002" value="'.$P[0][0][1].'" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P003" value="'.$P[0][0][2].'" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
</table>

Code:

1
2
.green { background-color: green; }
.red { background-color: red; }

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
document.querySelectorAll('input').forEach(input => {
updateBackground(input);
input.addEventListener('click', updateValue);
});
 
function updateBackground(input) {
input.classList.remove('red');
input.classList.remove('green');
if(parseInt(input.value) === 1) {
input.classList.add('green');
}
if(parseInt(input.value) === 0) {
input.classList.add('red');
}
}
 
function updateValue() {
if(parseInt(this.value) === 0) {
this.value = '';
updateBackground(this);
return;
}
 
if(!parseInt(this.value)) {
this.value = 1;
updateBackground(this);
return;
}
 
if(parseInt(this.value) === 1) {
this.value = 0;
updateBackground(this);
return;
}
 
}

27/12/2021, 22h17
Antoine13

Merci pour votre r�ponse

CHAPEAU ! Merci

J�aurai jamais pu trouver.

Cela fonctionne parfaitement apr�s de petites adaptations afin que l�ensembles des scripts se marient parfaitement.
En effet j�avais des B Radio qui pouvait prendre 1 comme valeur et au click, hop, ils �taient � 0.

Mais rien d�important.

Je verrai � l�usage mais cela devrai fonctionner

Encore une grand merci.

Bon bout d�an.

Antoine