Discussion :

[zeon71]

Bonjour à tous,

Je débute sur javascript 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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

[danielhagnoul]

Exemple :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[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

[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.

[zeon71]

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