Bonjour,

Je souhaiterais sélectionner mes balises input puis supprimer une classe CSS pour la remplacer par une autre. Je ne m'en sors pas dans l'utilisation des méthodes add() et remove() liées à la propriété classList (voir doc officielle ici).

document.getElementsByTagName('input').classList.remove('error');
document.getElementsByTagName('input').classList.add('success');

Ça ne marche pas... En décomposant un peu, j'ai une erreur qui me dit « document.getElementsByTagName('input').classList is undefined », ce qui est mal parti... Bon, si quelqu'un s'est déjà penché sur la solution pour supprimer et ajouter une classe, je suis preneur.

Je n'utilise pas jQuery, le reste de ma page étant en JS pur, je souhaite conserver les choses en l'état.

Merci par avance pour votre aide !!

wiltomap

-
Edité par wiltomap 16 juillet 2013 à 16:57:36

Je ne connaissais pas cette propriété, mais selon toute logique, je te dirais de gérer les champs un à un :

inputs = document.getElementsByTagName('input');
length = inputs.length; // Calcul nombre d'éléments

// Boucle pour effectuer l'action sur chaque élément
for(var i = 0; i < length; i++) { 
    inputs[i].classList.remove('error');
    inputs[i].classList.add('success');
}

http://jsfiddle.net/DJ7nA/2/

-
Edité par Anonyme 16 juillet 2013 à 17:14:47

Salut,

Merci je vais regarder ça. Mais à première vue, l'exemple jsFiddle que tu mets ne marche pas (les input sont toujours en vert...).

Je te tiens au courant !

wiltomap

-
Edité par wiltomap 16 juillet 2013 à 17:46:35

wil> C'est normal. j'ai mis ma classe error en rouge, et la success en vert. Sachant que toutes les classes error ont été supprimés dès le chargement, tu les vois directement vert .

Salut,

Merci beaucoup ! Ça marche enfin...

Bonne journée à toi.

wiltomap