Changement de couleur dans un input.

Version imprimable

Bonjour à tous,

Je débute sur javascript :oops: et j'ai besoin de résoudre un gros problème.

Il faut que je change la couleur de fond d'un input text selon la valeur de deux balises span.

Je dois mettre vert si c'est en dessous des deux valeurs, orange si c'est entre les deux et rouge si c'est supérieur.

Je sais le faire si je peux toucher le code html mais c'est là que ça bloque je ne peux pas toucher html de la page seulement le javascript.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
    <tr class="agl-tableactivity-bodyLine" data-uuid="181db628-7bde-45ec-bb85-51f09b4242d7">
        <input type="hidden" class="form-control agl-body-columns-value  agl-offline-noload" name="InstanceSyskey" value="2580">
        <input type="hidden" class="form-control agl-body-columns-value  agl-offline-noload" name="duoParentLabel" value="ATP_NEP">
        <input type="hidden" class="form-control agl-body-columns-value  agl-offline-noload" name="duoId" value="1">
        <td class="agl-body-column" data-aglcolumn="duoLabel">
            <span class="agl-body-columns-value " name="duoLabel">Vanne MC1</span>
        <td class="agl-body-column" data-aglcolumn="duoValue">
            <input type="text" class="form-control agl-body-columns-value  agl-offline-noload" name="duoValue" value="">
        </td>
        <td class="agl-body-column" data-aglcolumn="duoSeuil1">
            <span class="agl-body-columns-value " name="duoSeuil1">20</span>
        </td>
        <td class="agl-body-column" data-aglcolumn="duoSeuil2">
            <span class="agl-body-columns-value " name="duoSeuil2">70</span>
        </td>
        <td class="agl-body-column" data-aglcolumn="duoValueCorrection">
            <input type="text" class="form-control agl-body-columns-value  agl-offline-noload" name="duoValueCorrection" value="">
        </td>
    </tr>
</table>

Je vous remercie d'avance car je suis vraiment bloqué.

:salut:

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
.inputJaune {
  background-color: yellow
}
 
.inputRouge {
  background-color: red;
}
 
.inputBlanc {
  background-color: white;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const
    elemInputDuoValue = document.querySelector('input[name="duoValue"]'),
    elemInputDuoValueCorrection = document.querySelector('input[name="duoValueCorrection"]');
 
setTimeout(() => {
    elemInputDuoValue.classList.remove('inputRouge', 'inputBlanc');
    elemInputDuoValue.classList.add('inputJaune');
}, 3000);
 
setTimeout(() => {
    elemInputDuoValue.classList.remove('inputJaune', 'inputBlanc');
    elemInputDuoValue.classList.add('inputRouge');
}, 6000);
 
setTimeout(() => {
    elemInputDuoValue.classList.remove('inputJaune', 'inputRouge');
    elemInputDuoValue.classList.add('inputBlanc');
}, 9000);

14/02/2019, 11h11
zeon71

Merci à toi pour la réponse j'ai testé mais je dois faire une choses qui ne va pas.

Je ne vois rien qui change.

Je sais je suis nul :).

Pourrais tu m'en dire plus sur le code.

Ce que je comprends c'est que les couleurs changeront après un temps e qui ne me dérange pas car je peux mettre à zéro.

Mais comment mon input peut comparer les deux valeurs pour changer de couleur ?

Merci pour ton aide
14/02/2019, 11h19
danielhagnoul
Je vous assure que dans mon code de test, les couleurs de "duoValue" changent.

Dans mon exemple :
- je vous montre comment utiliser classList pour ajouter une classe et pour retirer deux classes.
- j'ai utilisé une temporisation, mais c'est à vous à définir les conditions à remplir pour provoquer le changement de couleur.
17/02/2019, 11h34
zeon71

Je vais retenter sur un autre pc pour voir. Merci bien ^^