modifier le style ( couleur et bordure) d'un input text

Version imprimable

Bonsoir tout le monde,
je suis débutante en javacript :roll: , et je cherche a modifier la couleur de background avec la bordure lorsque la valeur de cette input text égal a un texte précis et avec l’événement onload , j'esseye avec ce morceau de code mais en vain , je cherche maintenant ce qui de faute dedan merci d'avance pour votre aide

NB :
--script ----------
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> window.onload = function() { changeC(){ var Msg = document.getElementById ("Msg"); if (Msg.value=='Bien inséré !') { document.getElementById("Msg").style.border = "2px solid #00FF00;" ; document.getElementById("Msg").style.backgroundColor= "#00FF00;" ; } } } </script>
-- Body ----------
Code:

1 2 3 <body onload="changeC();"> .. <input type="text" style="border: 0;" name="Msg" id="Msg" />

Plusieurs choses

pas besoin de rappeler getElementById('Msg').

pas de ; DANS les propriétés de style

En JavaScript une fonction se déclare avec le mot clef function.

Tu fais un window.onload et tu rappelles une fonction mal déclarée dans le onload du body ...

Ensuite dans ta fonction tu testes le value de ton input qui n'en a pas !

Et pour terminer si tu mets une bordure de la même couleur que le fond, tu risque de ne pas la voir ...
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> function changeC(){ var Msg = document.getElementById ("Msg"); if (Msg.value=='Bien inséré !') { Msg.style.border="2px solid #FF0000"; Msg.style.backgroundColor= "#00FF00" ; } } </script>
..
Code:

1 2 3 <body onload="changeC();"> <input type="text" style="border: 0;" name="Msg" id="Msg" value="Bien inséré !" />
cf http://jsfiddle.net/vSWbR/2/

A noter que c'est possible à réaliser en CSS:

Code:

1
2
3
4
5
 
#Msg[value='Bien inséré !']{
    border: 2px solid red;
    background-color: lime;
}

Mais cela ne fonctionnera que pour l'attribut value initial au chargement de la page. Pour dynamiser le style, on a besoin de Javascript. Comme ceci par exemple :

Code:

1
2
 
document.getElementById("Msg").addEventListener("change", function(){ this.setAttribute("value", this.value)                                                                                                                        });

http://jsfiddle.net/vSWbR/3/

Salut à tous,

Je suis désolé de réouvrir un vieux post, mais je bloque (Noob en javascript et autre :/ )

J'ai adapté le code ci-dessus pour en faire ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var classautocalcule = document.getElementById ("classautocalcule");
var classnonautocalcule = document.getElementById ("classnonautocalcule"); 
 
  if (classautocalcule.value == classnonautocalcule.value) { 
 
    classautocalcule.style.border="2px solid #00FF00";
    classnonautocalcule.style.border="2px solid #00FF00";
 
  }
  else {
 
    classautocalcule.style.border="2px solid #FF0000";
    classnonautocalcule.style.border="2px solid #FF0000";  
 
  }
 
}  
 
changeC()

Seulement, ce n'est pas du ontime

Une idée ?

Merci d'avance

26/11/2018, 02h21
psychadelic

et elle sert à quoi la ligne 20 ? changeC().
.
.
une traduction serait la bien venue, ainsi qu'une description du but à atteindre et son contexte

Citation:

Seulement, ce n'est pas du ontime

Hello,

Peut-être pas à grand chose, mais c'est comme ça que c'était avant.

J'ai un peu avancé, mais ça ne fonctionne toujours pas.

En gros, j'ai plusieurs champs :

Le premier est le montant.
Puis j'ai une série de subdivisions qui doivent donner le même montant. (.fee)

Le javascript fait donc la somme de tous les fees

et si la somme est égal au montant repris dans le premier champs c'est ok --> vert si pas --> rouge
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var $fees = $('.fee').change(function(){ var total = 0; var classnonautocalcule = document.getElementById("classnonautocalcule").value; //iterate through all the fee elements and find the total $fees.each(function(){ total += (parseFloat($.trim(this.value)) ||0) }) $('.classautocalcule').text( total.toFixed(2) ); if(total == classnonautocalcule){ $('.classautocalcule').style.border="2px solid #00FF00"; } else{ $('.classautocalcule').style.border="2px solid #FF0000"; } });

26/11/2018, 02h36
equi-monde

J'y suis arrivé :D

Merci