Replace

bonjour,
je vous explique mon probleme je suis alternance bts, et dans mon projet je voudrais jouer avec les class html, j'ai un select avec des option ( style,rouge,violet) et par Default j'ai style, et je voudrai que quand je click sur rouge que ma class face un remplacement de style vers rouge je vous met ci joint mon code

svp aider moi merci

function wow(value){
    var index = {
        default: "cards-family",
        rouge: "rouge",
        violet: "violet"
          
    };
 //document.getElementById("cards-family").classList.remove = ( index[value] ,"" ) ;
 document.getElementById("cards-family").className.replace( (?:^|\s)index(?!\S)/g , index )

}; 

<select class="select-theme" name="couleur" onchange="wow(this.value);" >
                            <option value="default" selected="selected" >style</option>
                            <option name="rouge" value="rouge" id="rouge" >rouge</option>
                            <option value="violet" name="violet" id="violet" >violet</option>
                          </select>

Salut

Sinon plus simple tu as :

var element = document.getElementById("cards-family");
 element.classList.toggle("rouge");

Bonjour,

Comme je vois que t'as quand même déjà un peu cherché vu l'allure de la regex qui se trouve dans ton code, voici ci-dessous une solution qui la fait fonctionner. Tu étais tout proche. On commence par supprimer les éventuelles classes ayant pour nom default, rouge, violet ... (à toi d'adapter la liste), ce que fait très bien ta regex. Puis on ajoute ensuite simplement la classe de remplacement contenue dans le paramètre value. Je n'ai pas réussi à faire ça en une ligne, mais ça doit être possible (attention pour experts : les pièges sont nombreux avec cette regex). On va quand même pas tout faire !

function wow(value)
{
    var c = document.getElementById("cards-family").className;
    c = c.replace(/(?:^|\s)(default|rouge|violet)(?!\S)/g,'');
    document.getElementById("cards-family").className = c + ' ' + value;
}

EDIT: si l'on suppose que les classes default, rouge, violet ... n'apparaissent qu'une fois dans la liste des classes d'un élément (ce qui constitue une supposition raisonnable) on peut faire plus simple avec une regex qui fait à la fois la suppression et le remplacement, comme par exemple :

function wow(value)
{
    var c = document.getElementById("cards-family").className;
    c = c.replace(/\b(default|rouge|violet)\b/,value);
    document.getElementById("cards-family").className = c;
}

Amicalement,
Modifié par parsimonhi (02 Dec 2018 - 17:14)