Salut à tous,
 
Je débute dans la création de site web, je ne connais pas bien les bonnes pratiques.
 
J'ai un problème de display='none'. Je ne sais pas bien si c'est Javascript, css ou html qui pose problème.
 
Le contexte :
Un utilisateur peu compétent doit relever manuellement des consommations sur des compteurs (IRL). Ensuite, il va saisir ces relevés dans de nombreuses textbox pour qu'elles soient stockées et traitées. La probabilité qu'il fasse des erreurs de saisie est grande. Je voudrais donc que ses saisies soient analysées à la volée et pas après un retour serveur PHP ou AJAX.
 
J'ai pensé à faire un petit javascript testant si la donnée saisie est bien comprise dans une fourchette :

Ensuite, je souhaite afficher une validation avec soit un, soit unà côté de chaque textbox.
Je les ai donc mis dans des <span> et le Javascript s'occupe de les display='none' ou display='inline' :

Tout fonctionne presque bien.
Le deuxième <span> (et donc la deuxième image) n'est jamais visible quand le Javascript l'ordonne. Comme si le premier display='none' s'appliquait aussi au second.
 
Pour "résoudre" le problème, j'ai mis tout ça dans un tableau, et ça marche. Mais du coup, j'ai un décalage à cause de la largeur des cellules.
 
Des ptites images pour mieux voir :
 
Ce que j'ai actuellement, avec la textbox et les images dans un tableau :

 
Ce que je veux :

 
Après, si vous avez de meilleurs méthodes pour arriver à ce que je veux faire, ou si vous avez des critiques sur ma façon de travailler et mon code, je suis preneur.

Peut-être que ce serait un problème classique de conversion de données.
En effet, la value d'un textbox est une chaine de caractères, alors que 0 et 100 sont des nombres entiers.
Parfois Javascript fait des conversions de type implicitement, mais pas toujours.
Il faudrait essayer de faire le test avec  

Mais peut-être que ce n'est pas cela.
 
Edit: En fait, j'ai lu trop vite, excusez-moi.
Pour résoudre le problème de décalage, au lieu de faire display='none', il y a d'autres méthodes qui donnent peut-être de meilleurs résultats. Par exemple :
 
1. Faire un ....innerHtml=...
2. Faire un ....src=...
3. Avoir une image qui contient les deux images l'une en dessous de l'autre, et jouer sur la position en Y de l'image qui est affichée.

Merci pour ta réponse.
En effet, je ne pense pas que ça soit ça le problème, tout se gère très bien quand les deux champs <span> sont séparés (ici, je les ai mis dans un tableau).
Par contre, dès qu'ils sont sortir du tableau, les champs <span> se suivent et le deuxième ne fonctionne pas.
 
En fait, c'est tout ce qui suit le premier span qui ne marche pas, jusqu'à la fin du block.
 
Aaaah, j'ai trouvé, je fermais pas bien mes span.
 
J'ai remplacé <span/> par </span>, et ça roule.
 
Alala, ridicule...