Changement texte lors d'un clic

**Krisiun** · 16/05/2013, 13h15

Bonjour,
j'ai crée un spoil que lorsqu'on clique sur du texte ça me fait apparaître un autre, mais j'aimerais également que le texte change lors du clique, jusqu'à là j'ai réussi en utilisant ce code :

Code :

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

1
2
3
function changer1() {
    document.getElementById('msg1').innerHTML = '▲ Description';
}

Code html :

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

1
2
3
4
<A href="#" onClick="changer1();">
<p class="position2" id="msg1">▼ Description</p>
<img src="./atex/fleche.png" >
</A>

Mais après je me suis rendu compte que si je re-cliquer ben ça ne redevenait pas comme avant (logique :p), donc j'ai écris cette fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
function changer1() {
    if (document.getElementById('msg1').innerHTML = "▼ Description")
    {
        document.getElementById('msg1').innerHTML = "▲ Description";
    }
    else
    {
        document.getElementById('msg1').innerHTML = "▼ Description";
    }
}

Et là gros problème il rentre tout le temps dans le if, enfin je sais pas vraiment ce qu'il fait mais en tout cas, il ne rechange pas comme prévu snif :'(

**SpaceFrog** · 16/05/2013, 13h21

le souci provient du fait que l'evenement est lancé sur un href de balse a ...

il faut inhiber le href

Code :

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

<a href="#" onclick="changer1(); return false;">

**Krisiun** · 16/05/2013, 13h57

Salut, j'ai changé ma balise a comme tu m'as dis, mais maintenant mon spoil ne marche même plus, mais en plus ça ne marche toujours pas, ça ne change qu'une fois ^^'

**Bovino** · 16/05/2013, 14h06

Il faut surtout comprendre la différence entre une affectation et une comparaison, notamment dans un if...

Code :

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

if (document.getElementById('msg1').innerHTML = "▼ Description")

**Krisiun** · 16/05/2013, 14h09

J'ai déjà testé == et même === (qui existe en JS), et rien ne marche

j'ai toujours eu le même résultat qu'avec un = simple

**SpaceFrog** · 16/05/2013, 14h10

attention !!!
l'operateur de comparaison d'egalité est ==

de plus il semblerait que le caractère spécial soit modifié dans le innerHTML

cf. http://jsfiddle.net/PXcv3/1/

**Krisiun** · 16/05/2013, 14h14

Ok j'ai trouvé le problème, si j'enlève le caractère spécial et que je met ==, le texte se modifie correctement, mais le but c'est le caractère spécial, une fleche qui point vers le bas puis vers le haut ;'( !
Donc apparament JS ne reconnait pas le caractère, quelqu'un a une idée ? ^^'

**SpaceFrog** · 16/05/2013, 14h17

passe par des attributs data-

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
<script type="text/javascript">
function changer1(elt) {
   obj=document.getElementById(elt)
    if (obj.getAttribute('data-up') == "0") {
        obj.innerHTML = "▲ Description";
        obj.setAttribute('data-up',1)
    } else {
        obj.innerHTML = "▼ Description";
        obj.setAttribute('data-up',0)
 
    }
}
</script>
</head>
 
<body>
<a href="#" onclick="changer1('msg1'); return false;">
 
<p class="position2" id="msg1" data-up="0" >▼ Description</p>
 
    <img src="./atex/fleche.png" />
 
</a>

Changement texte lors d'un clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager