script qui ne fonctionne pas de suite

Version imprimable

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:

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>

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:

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>

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:

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

Code:

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:

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');
    }
}

07/05/2012, 00h08
ravaza

merci, ca parait logique effectivement
07/05/2012, 00h18
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.