Discussion :

[ravaza]

Bonjour,
sur le code suivant ma fonction fonctionne bien pour passer du rouge au vert mais pour passer du vert au rouge il faut cliquer 2 fois. Je ne vois pas ou se situe mon erreur...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.class0 { color: green;}
.class1 { color: red; }
</style>
 
<em class='class0' id='id1' onclick="changestyle('1');">rub1</em> |
<em class='class1' id='id2' onclick="changestyle('2');">rub2</em> |
<em class='class0' id='id3' onclick="changestyle('3');">rub3</em> |
 
<script>
function changestyle(tt) {
    if (document.getElementById('id'+tt).style.color == 'green') {document.getElementById('id'+tt).style.color = 'red';} 
    else {document.getElementById('id'+tt).style.color = 'green';}
}
</script>

[ravaza]

j'ai trouvé le moyen de contourner le probleme en plaçant le style directement sans passer par une classe. Comment expliquer la différence dans le traitement de la fonction javascript ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<em style='color:red;' id='id4' onclick="changestyle('4');">rub4</em> |
<em style='color:green;' id='id5' onclick="changestyle('5');">rub5</em> |
 
<script>
function changestyle(tt) {
    if (document.getElementById('id'+tt).style.color == 'green') {document.getElementById('id'+tt).style.color = 'red';} 
    else {document.getElementById('id'+tt).style.color = 'green';}
}
</script>

[Willpower]

comme tu l'as si bien découvert, ton objet du DOM possède une "class" qui elle même possède ses caractéristiques (green, red, etc...) mais l'objet lui-même ne possède pas directement ces caractéristiques. (en simplifié)


Pour palier à cela, tu dois tester sa "class" et non son "style" pour rester conforme à ton premier code :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.class0 { color: green;}
.class1 { color: red; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<em class='class0' id='id1' onclick="toggleClass(this);">rub1</em> |
<em class='class1' id='id2' onclick="toggleClass(this);">rub2</em> |
<em class='class0' id='id3' onclick="toggleClass(this);">rub3</em> |

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function hasClass(obj,classe){
    return obj.className.split(' ').indexOf(classe)+1; 
}
 
function addClass(obj,classe){
    if(hasClass(obj,classe)){
        return true;
    }
    obj.className += ' '+classe;
    return true;
}
 
function removeClass(obj,classe){
    var index = hasClass(obj,classe);
    if(!index){
        return true;
    }
    var classes = obj.className.split(' ');
    if(classes[index-1]!=classe){
        throw("erreur lors du changement de classe");
        return false;
    }
    classes.splice(index-1,1);
    obj.className = classes.join(' ');
    return true;
}
 
function toggleClass(obj) {
    if(hasClass(obj,'class0')){
        removeClass(obj,'class0');
        addClass(obj,'class1');
    } 
    else{
        removeClass(obj,'class1');
        addClass(obj,'class0');
    }
}

[ravaza]

merci, ca parait logique effectivement

[Willpower]

Note: j'ai écris mon code à l'aveugle et il possédait pas mal d'erreurs, je viens de l'éditer et de les corriger.