Modifier la valeur de l'attribut class

Bonjour

J'ai les 2 codes suivant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 <div class="container">
                        <div class="row">
                            <div class="span12">
                                <nav class="desktop-nav">
                                    <ul class="clearfix">
                                         <li><a class="yo" href="<c:url value="/index.jsp"/>">Accueil </a></li>
                                         <li><a  href="<c:url value="/about.jsp"/>">QUI SOMMES-NOUS</a></li>
                                         <li><a href="<c:url value="/galerie.jsp"/>">LA GALERIE</a>
                                            <ul class="clearfix sub-menu">
                                                <li class="clearfix">
                                                    <div class="links">
                                                       <h3>NOS PRODUITS</h3>
                                                        <p>
                                                            <a href="<c:url value="/produits/batik.jsp"/>">Batik</a>
                                                            <a href="#">Bijoux</a>
                                                            <a href="#">Bracelets</a>
                                                            <a href="#">Cartables</a>
                                                            <a href="#">Coffrets</a>
                                                            <a href="#">Malles de rangement</a>
                                                            <a href="#">Porte-documents</a>
                                                        </p>
 
                                                        <p>
                                                            <a href="#">Sacs</a>
                                                            <a href="#">Tableaux</a>
                                                            <a href="#">Vanneries</a>
 
                                                        </p>
 
                                                    </div>
                                                    <figure>
                                                        <a href="#"><img src="images/croix.png" alt="image non disponible"/></a>
                                                    </figure>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="<c:url value="/cuisine.jsp"/>">CUISINE D'AFRIQUE</a>                                        
 
                                        </li>
                                        <li><a href="<c:url value="/contact.jsp"/>">CONTACTEZ-NOUS</a></li>
 
                                    </ul>
                                </nav>
 
                                <select>
                                    <option>BAGS</option>
                                    <option>Jackets</option>
                                    <option>ACCESORIES </option>
                                    <option>CATEGORIES</option>
                                    <option>Manufacters</option>
                                    <option>Sale </option>
                                    <option>Blog</option>
                                    <option>Dresses</option>
                                    <option>Jewelry</option>
                                    <option>ShOES</option>
                                    <option>Shirts</option>
                                </select>
                            </div>
                        </div>
                    </div>

et:

Code:

1
2
3
4
5
6
7
8
function sayHello() {
    var aa = document.querySelector('.container .row .span12 .desktop-nav .clearfix li a').getAttribute('class');
    alert(aa);
 
    var bb = aa.setAttribute('class', 'choisi');
    alert(bb);
}
</script>

En fait mon code est censé récupérer la valeur de l'attribut class qui est "yo", l'afficher, la modifier et ensuite ré-afficher sa nouvelle valeur qui est "choisi" . Pour le 1er alerte il m'affiche yo.

Mais pour le 2e, la valeur "choisi" ne s'affiche pas. En fait même la fenêtre de l'Alert ne s'affiche pas.

Merci

salut,

je te conseille d'abandonner les alert() pour tes debugs, et de passer par console.log() (F12 pour affiche la console)
de plus, pour modifier des classes, passe plutot par classList www.w3schools.com/jsref/prop_element_classlist.asp

element.classList.contains()
element.classList.add()
element.classList.remove()

Ok merci pour tes conseils, je ne connaissais pas l'astuce pour F12.

Sinon j'ai pu passer par le JQuery pour récupérer l'attribut car je voulais depuis un moment me lancer dans l'apprentissage du JQuery.

Code:

$('.nonchoisi').attr('class','choisi');

Là je récupère tous les attributs Class ayant la valeur "nonchoisi",et je leur affecte une nouvelle valeur qui est "choisi". Sympa et propre 8-)

Merci.